:root {
    --bl-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --bl-font-display: var(--bl-font-body);
    --bl-black: #020605;
    --bl-black-soft: #07100d;
    --bl-green-deep: #06261b;
    --bl-green: #087a55;
    --bl-green-bright: #00d084;
    --bl-green-muted: #123c2f;
    --bl-logo-orange: #d88900;
    --bl-logo-orange-bright: #ffad18;
    --bl-logo-orange-dark: #6f4200;
    --bl-white: #ffffff;
    --bl-offwhite: #f3f7f5;
    --bl-muted: #b6c6bf;
    --bl-border: rgba(0, 208, 132, .28);
    --bl-orange-border: rgba(255, 173, 24, .45);
    --bl-shadow: 0 24px 80px rgba(0, 0, 0, .45);
    --bl-radius: 18px;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body.beerleague-site {
    min-height: 100%;
    margin: 0;
    background:
        radial-gradient(circle at 50% -10%, rgba(0, 208, 132, .13), transparent 42rem),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(145deg, #04120d 0%, #020706 48%, #06261b 100%);
    background-size: auto, 42px 42px, 42px 42px, auto;
    color: var(--bl-offwhite);
    font-family: var(--bl-font-body);
    line-height: 1.45;
    font-size: 14px;
}
a { color: var(--bl-green-bright); text-decoration: none; transition: color .18s ease, opacity .18s ease, background .18s ease, border-color .18s ease, transform .18s ease; }
a:hover, a:focus { color: var(--bl-white); }
img { max-width: 100%; height: auto; }
.skip-link { position: absolute; left: -9999px; top: 1rem; z-index: 1000; padding: .8rem 1rem; background: var(--bl-green-bright); color: #00150d; border-radius: 999px; }
.skip-link:focus { left: 1rem; }

.bl-container { width: min(1360px, calc(100% - 36px)); margin-inline: auto; }
.bl-site-header { position: relative; padding: .7rem 0 .65rem; }
.bl-header-inner { width: min(1120px, calc(100% - 32px)); margin: 0 auto; text-align: center; }
.bl-topbar { margin-bottom: .7rem; color: var(--bl-muted); font-size: .92rem; }
.bl-brand { display: inline-flex; align-items: center; justify-content: center; margin: .1rem auto .55rem; filter: drop-shadow(0 20px 34px rgba(0,0,0,.55)); }
.bl-brand img { width: min(520px, 76vw); display: block; }

/* Top Menu position: black/green/orange to match the BEERLEAGUE logo */
.bl-top-menu {
    width: min(960px, 100%);
    margin: 0 auto .55rem;
    padding: .28rem;
    border: 1px solid rgba(0, 208, 132, .28);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(2,20,14,.76));
    box-shadow: inset 0 1px rgba(255,255,255,.05), 0 18px 44px rgba(0,0,0,.32);
}
.bl-top-menu ul,
.bl-module-nav ul { list-style: none; margin: 0; padding: 0; }
.bl-top-menu ul { display: flex; gap: .45rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.bl-top-menu li { margin: 0; padding: 0; }
.bl-top-menu a,
.bl-top-menu .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: .48rem .85rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--bl-logo-orange-bright);
    background: transparent;
    font-weight: 950;
    letter-spacing: .035em;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 2px 2px 0 rgba(0,0,0,.65);
}
.bl-top-menu a:hover,
.bl-top-menu a:focus,
.bl-top-menu .current > a,
.bl-top-menu .active > a,
.bl-top-menu .active .nav-link {
    color: #07100d;
    border-color: var(--bl-orange-border);
    background: linear-gradient(180deg, var(--bl-logo-orange-bright), var(--bl-logo-orange));
    box-shadow: inset 0 1px rgba(255,255,255,.35), 0 10px 26px rgba(216,137,0,.18);
    transform: translateY(-1px);
    text-shadow: none;
}

/* Server Status row. Assign one server module to each position: server-status-1, server-status-2, server-status-3. */
.bl-server-status-row {
    width: min(960px, 100%);
    margin: .45rem auto .55rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
    align-items: stretch;
}
.bl-server-status-slot {
    min-width: 0;
}
.bl-server-status-count-1 { grid-template-columns: minmax(0, 1fr); }
.bl-server-status-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bl-server-status-count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bl-server-status-row .moduletable,
.bl-server-status-row .card,
.bl-server-status-row .well {
    height: 100%;
    margin: 0;
    padding: .65rem;
    border: 1px solid rgba(0, 208, 132, .32);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(6, 64, 44, .88), rgba(3, 24, 17, .92));
    color: var(--bl-offwhite);
    box-shadow: 0 14px 32px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.05);
    overflow: hidden;
}
.bl-server-status-row .moduletable > h3,
.bl-server-status-row h3 {
    margin: 0 0 .45rem;
    color: var(--bl-white);
    font-size: .82rem;
    line-height: 1.1;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.bl-server-status-row a {
    color: var(--bl-green-bright);
}
.bl-server-status-row .btn,
.bl-server-status-row button,
.bl-server-status-row input[type="submit"] {
    min-height: 30px;
    padding: .38rem .65rem;
    font-size: .72rem;
    border-radius: 8px;
}
.bl-server-status-row img {
    max-width: 100%;
}

/* Shared button style */
.bl-btn, .btn, button, input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: .56rem 1rem;
    border: 1px solid rgba(0, 208, 132, .45);
    border-radius: 999px;
    background: linear-gradient(180deg, #0b8b60 0%, #064c36 100%);
    color: var(--bl-white);
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: inset 0 1px rgba(255,255,255,.18), 0 12px 28px rgba(0,0,0,.28);
    cursor: pointer;
}
.bl-btn:hover, .btn:hover, button:hover, input[type="submit"]:hover { background: linear-gradient(180deg, #0faf78 0%, #076747 100%); color: var(--bl-white); }

/* Top Search position. Supports the BEERLEAGUE Stats Search module and Joomla search/finder modules. */
.bl-top-search-area {
    width: min(880px, 100%);
    margin: .45rem auto .65rem;
    padding: .55rem .7rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    background: rgba(255,255,255,.045);
    box-shadow: inset 0 1px rgba(255,255,255,.04), 0 16px 44px rgba(0,0,0,.22);
}
.bl-top-search-area .bl-stats-search,
.bl-stats-search {
    width: min(820px, 100%);
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    display: flex;
    gap: .55rem;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}
.bl-top-search-area .bl-stats-search form,
.bl-stats-search form,
.bl-top-search-area .mod-finder__search,
.bl-top-search-area .finder,
.bl-top-search-area form.form-search,
.bl-top-search-area form {
    flex: 1 1 205px;
    display: flex;
    gap: .55rem;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}
.bl-top-search-area input[type="search"],
.bl-top-search-area input[type="text"],
.bl-stats-search input[type="search"],
.bl-stats-search input[type="text"] {
    min-width: 0;
    flex: 1 1 auto;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(0,208,132,.22);
    background: rgba(255,255,255,.96);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 12px 26px rgba(0,0,0,.18);
    color: #101714;
    padding: .55rem .9rem;
    font: inherit;
}
.bl-top-search-area button,
.bl-top-search-area input[type="submit"],
.bl-stats-search button {
    flex: 0 0 auto;
    min-width: 52px;
    height: 42px;
    padding: .65rem .95rem;
}

.bl-module-nav:not(:empty) { margin: 1rem auto; }
.bl-stats-nav { display: flex; gap: .55rem; justify-content: center; flex-wrap: wrap; align-items: center; margin: 1rem auto 1.5rem; }

/* Stats Navigation module position. This is separate from Top Menu and renders only once. */
.bl-beerleague-nav-area {
    width: min(1000px, 100%);
    margin: .2rem auto .75rem;
    padding: .2rem .4rem;
}
.bl-beerleague-nav-area .bl-stats-nav,
.bl-beerleague-nav-area .bl-module-stats-nav {
    margin: 0 auto;
    display: flex;
    gap: .55rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.bl-beerleague-nav-area .bl-btn {
    min-height: 36px;
    padding-inline: .95rem;
}

/* Featured Articles position replaces the old large hero box. */
.bl-featured-section { padding: .25rem 0 .85rem; }
.bl-featured-articles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    align-items: stretch;
}
.bl-featured-articles > .moduletable,
.bl-featured-articles > section,
.bl-featured-articles > div,
.bl-featured-articles article,
.bl-featured-articles .newsflash-item,
.bl-featured-articles .mod-articlesnews__item {
    min-width: 0;
}
.bl-featured-articles .moduletable,
.bl-featured-articles article,
.bl-featured-articles .newsflash-item,
.bl-featured-articles .mod-articlesnews__item,
.bl-feature-card {
    border: 1px solid var(--bl-border);
    border-radius: var(--bl-radius);
    background: linear-gradient(180deg, rgba(6,38,27,.82), rgba(2,6,5,.88));
    box-shadow: var(--bl-shadow);
    padding: clamp(.75rem, 1.4vw, 1rem);
    backdrop-filter: blur(6px);
}
.bl-featured-articles h2,
.bl-featured-articles h3,
.bl-featured-articles .moduletable > h3 {
    margin: 0 0 .7rem;
    color: var(--bl-white);
    text-transform: uppercase;
    letter-spacing: .05em;
    text-shadow: 2px 2px 0 rgba(0, 208, 132, .18);
}
.bl-featured-articles p { color: var(--bl-muted); }
.bl-featured-articles .readmore a,
.bl-featured-articles .btn {
    margin-top: .8rem;
}
.bl-featured-articles .newsflash,
.bl-featured-articles .mod-articlesnews {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
}

.bl-main { padding: .55rem 0 3rem; }
.bl-breadcrumbs { margin: 0 0 1rem; color: var(--bl-muted); }
.bl-above-content, .bl-below-content { margin: 0 0 1.2rem; }
.bl-below-content { margin-top: 1.2rem; }
.bl-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.bl-sidebar { min-width: 0; }
.bl-content-card,
.moduletable:not(.bl-sidebar-right .moduletable),
.card,
.well {
    border: 1px solid var(--bl-border);
    border-radius: var(--bl-radius);
    background: linear-gradient(180deg, rgba(6,38,27,.82), rgba(2,6,5,.86));
    box-shadow: var(--bl-shadow);
    backdrop-filter: blur(6px);
}
.bl-content-card { padding: clamp(.75rem, 1.4vw, 1.1rem); min-width: 0; }
.bl-content-card:empty { display: none; }
.bl-sidebar-left .moduletable { padding: .85rem; margin-bottom: 1rem; }

/* Right sidebar intentionally contrasts with the dark site. */
.bl-sidebar-right {
    color: #07100d;
}
.bl-sidebar-right .moduletable,
.bl-sidebar-right .card,
.bl-sidebar-right .well {
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, #edf4ef);
    color: #07100d;
    box-shadow: 0 18px 42px rgba(0,0,0,.32);
    padding: .85rem;
    margin-bottom: 1rem;
}
.bl-sidebar-right h1,
.bl-sidebar-right h2,
.bl-sidebar-right h3,
.bl-sidebar-right h4,
.bl-sidebar-right label,
.bl-sidebar-right .moduletable > h3 {
    color: #07100d;
    text-shadow: none;
}
.bl-sidebar-right a { color: #006a47; font-weight: 800; }
.bl-sidebar-right a:hover { color: #003a27; }
.bl-sidebar-right input,
.bl-sidebar-right select,
.bl-sidebar-right textarea {
    background: #fff;
    color: #07100d;
    border-color: rgba(0,0,0,.18);
}
.bl-sidebar-right .btn,
.bl-sidebar-right button,
.bl-sidebar-right input[type="submit"] {
    color: var(--bl-white);
    border-color: rgba(0, 208, 132, .55);
    background: linear-gradient(180deg, #0b8b60 0%, #064c36 100%);
}

.bl-footer { padding: 1.5rem 0 2.2rem; color: var(--bl-muted); text-align: center; border-top: 1px solid rgba(0,208,132,.12); }
.bl-footer-note { margin: 1rem 0 0; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; }

/* Joomla content cleanup */
.page-header h1, .page-header h2, h1, h2, h3 { color: var(--bl-white); letter-spacing: .04em; }
input, select, textarea {
    width: 100%;
    max-width: 100%;
    min-height: 38px;
    border: 1px solid rgba(0,208,132,.25);
    border-radius: 999px;
    background: rgba(255,255,255,.94);
    color: #101714;
    padding: .55rem .85rem;
    font: inherit;
}
textarea { border-radius: 18px; }
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid rgba(255,255,255,.12); padding: .7rem; }
th { background: rgba(0, 208, 132, .18); color: var(--bl-green-bright); text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; }
td { background: rgba(0,0,0,.28); }
.alert, .joomla-alert { border-radius: 16px; }

/* BEERLEAGUE stats component/module shared styling */
.bl-stats-shell { width: 100%; }
.bl-stats-header { text-align: center; margin-bottom: 1rem; }
.bl-stats-title { margin: .15rem 0 .75rem; font-size: clamp(1.45rem, 2.2vw, 2.15rem); line-height: 1; text-transform: uppercase; text-shadow: 3px 3px 0 rgba(0, 208, 132, .2); }
.bl-stat-table-wrap { width: 100%; max-width: 100%; overflow: visible; border: 1px solid var(--bl-border); border-radius: 16px; background: rgba(0,0,0,.28); padding: .55rem; }
table.bl-stat-table { table-layout: fixed; width: 100%; font-size: clamp(.64rem, .66vw, .78rem); }
table.bl-stat-table th, table.bl-stat-table td { overflow-wrap: anywhere; word-break: normal; text-align: center; vertical-align: middle; padding: clamp(.28rem, .55vw, .5rem); }
table.bl-stat-table th { background: rgba(0, 208, 132, .16); color: var(--bl-green-bright); }
table.bl-stat-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.045); }
.bl-score-red { color: #ff6b7a; font-weight: 900; }
.bl-score-blue { color: #72d9ff; font-weight: 900; }
.bl-pill { display: inline-flex; align-items: center; justify-content: center; padding: .25rem .55rem; border: 1px solid var(--bl-border); border-radius: 999px; background: rgba(0,208,132,.09); color: var(--bl-white); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.bl-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .9rem; }
.bl-stat-card { border: 1px solid var(--bl-border); border-radius: 18px; background: rgba(0,0,0,.32); padding: .85rem; }
.bl-stat-card strong { display: block; color: var(--bl-green-bright); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.bl-stat-card span { display: block; color: var(--bl-white); font-size: 1.4rem; font-weight: 900; }
.bl-pagination { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; margin: 1rem 0 0; }
.bl-pagination a, .bl-pagination span { min-width: 38px; min-height: 38px; display: inline-flex; align-items:center; justify-content:center; border-radius: 999px; border: 1px solid var(--bl-border); padding: .35rem .65rem; }
.bl-pagination .active { background: var(--bl-green); color: var(--bl-white); font-weight: 900; }

@media (min-width: 1280px) {
    .bl-layout.bl-has-sidebar-left.bl-has-sidebar-right { grid-template-columns: 240px minmax(0, 1fr) 295px; }
    .bl-layout.bl-has-sidebar-left:not(.bl-has-sidebar-right) { grid-template-columns: 250px minmax(0, 1fr); }
    .bl-layout.bl-has-sidebar-right:not(.bl-has-sidebar-left) { grid-template-columns: minmax(0, 1fr) 295px; }
    .bl-layout:has(.bl-sidebar-left):has(.bl-sidebar-right) { grid-template-columns: 240px minmax(0, 1fr) 295px; }
    .bl-layout:has(.bl-sidebar-left):not(:has(.bl-sidebar-right)) { grid-template-columns: 250px minmax(0, 1fr); }
    .bl-layout:has(.bl-sidebar-right):not(:has(.bl-sidebar-left)) { grid-template-columns: minmax(0, 1fr) 295px; }
}
@media (max-width: 1279.98px) {
    .bl-layout.bl-has-sidebar-left,
    .bl-layout.bl-has-sidebar-right,
    .bl-layout:has(.bl-sidebar-left),
    .bl-layout:has(.bl-sidebar-right) {
        grid-template-columns: minmax(0, 1fr);
    }
    .bl-content-card { order: 1; width: 100%; min-width: 0; }
    .bl-sidebar-left { order: 0; width: 100%; min-width: 0; max-width: none; }
    .bl-sidebar-right { order: 2; width: 100%; min-width: 0; max-width: none; }
    .bl-sidebar-right .moduletable,
    .bl-sidebar-right .card,
    .bl-sidebar-right .well {
        width: 100%;
        max-width: none;
    }
}
@media (max-width: 1100px) {
    .bl-featured-articles,
    .bl-featured-articles .newsflash,
    .bl-featured-articles .mod-articlesnews { grid-template-columns: 1fr; }
    .bl-sidebar-right { color: var(--bl-offwhite); }
}
@media (max-width: 900px) {
    .bl-server-status-row { grid-template-columns: 1fr; width: min(680px, 100%); }
    .bl-container, .bl-header-inner { width: min(100% - 24px, 100%); }
    .bl-content-card { padding: .8rem; }
    .bl-top-menu { border-radius: 16px; }
    .bl-top-menu ul { align-items: stretch; }
    .bl-top-menu li, .bl-top-menu a, .bl-top-menu .nav-link { width: 100%; }
    .bl-top-search-area .bl-stats-search form,
    .bl-stats-search form,
    .bl-top-search-area form { flex-basis: 100%; }
    table.bl-stat-table, table.bl-stat-table thead, table.bl-stat-table tbody, table.bl-stat-table th, table.bl-stat-table td, table.bl-stat-table tr { display: block; }
    table.bl-stat-table thead { display: none; }
    table.bl-stat-table tr { margin: 0 0 .9rem; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; overflow: hidden; }
    table.bl-stat-table td { display: flex; justify-content: space-between; gap: .8rem; text-align: right; border-width: 0 0 1px; }
    table.bl-stat-table td::before { content: attr(data-label); color: var(--bl-green-bright); font-weight: 900; text-transform: uppercase; text-align: left; }
}
@media (max-width: 600px) {
    .bl-brand img { width: min(420px, 88vw); }
    .bl-top-search-area { padding: .55rem; }
    .bl-top-search-area .bl-stats-search form,
    .bl-stats-search form,
    .bl-top-search-area form { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
}

/* v1.0.8 slimline tuning: make the header/logo the focus and reduce bulk elsewhere. */
.bl-site-header + .bl-featured-section,
.bl-site-header + .bl-main {
    margin-top: 0;
}
.bl-top-menu a,
.bl-top-menu .nav-link,
.bl-btn,
.btn,
button,
input[type="submit"],
.bl-beerleague-nav-area .bl-btn,
.bl-stats-nav .bl-btn {
    font-size: .82rem;
}
.bl-beerleague-nav-area .bl-stats-nav,
.bl-stats-nav {
    margin: .45rem auto .8rem;
}
.bl-stats-shell .bl-stats-header {
    margin-bottom: .55rem;
}
.bl-stats-shell .bl-stats-search {
    width: min(760px, 100%);
    margin: .55rem auto .65rem;
    padding: .45rem .55rem;
    border-radius: 16px;
    gap: .5rem;
}
.bl-stats-shell .bl-stats-search form {
    flex: 1 1 185px;
    gap: .45rem;
}
.bl-stats-shell .bl-stats-search input[type="search"],
.bl-stats-shell .bl-stats-search input[type="text"] {
    height: 40px;
    min-height: 40px;
    padding: .48rem .8rem;
    font-size: .88rem;
}
.bl-stats-shell .bl-stats-search button,
.bl-stats-shell .bl-stats-search input[type="submit"] {
    height: 40px;
    min-height: 40px;
    min-width: 40px;
    padding: .42rem .65rem;
    font-size: .76rem;
}
.bl-stats-shell .bl-stats-nav {
    gap: .55rem;
    margin: .55rem auto .9rem;
}
.bl-stats-shell .bl-stats-nav .bl-btn {
    min-height: 36px;
    padding: .5rem .9rem;
    font-size: .78rem;
}
.bl-stat-table-wrap {
    border-radius: 16px;
}
.bl-content-card table,
.bl-content-card .bl-stat-table {
    font-size: .76rem;
}
.bl-content-card th,
.bl-content-card td {
    padding: .48rem;
}
.bl-content-card .bl-pill {
    font-size: .68rem;
    padding: .18rem .45rem;
}
.bl-sidebar-right .moduletable,
.bl-sidebar-right .card,
.bl-sidebar-right .well {
    padding: .9rem;
    font-size: .9rem;
}
.bl-sidebar-right .moduletable > h3,
.bl-sidebar-right h3 {
    margin: 0 0 .7rem;
    font-size: 1.05rem;
    letter-spacing: .02em;
}
.bl-sidebar-right .bl-stat-card,
.bl-sidebar-right .moduletable .bl-stat-card {
    padding: .75rem;
    border-radius: 13px;
}
.bl-sidebar-right .bl-stat-card span {
    font-size: 1.15rem;
}

/* Joomla login module cleanup in the light right sidebar. */
.bl-sidebar-right .mod-login,
.bl-sidebar-right .login,
.bl-sidebar-right form[id*="login"] {
    display: grid;
    gap: .55rem;
}
.bl-sidebar-right .mod-login label,
.bl-sidebar-right .login label,
.bl-sidebar-right form[id*="login"] label {
    margin: 0 0 .22rem;
    color: #07100d;
    font-size: .82rem;
    font-weight: 700;
}
.bl-sidebar-right .mod-login input[type="text"],
.bl-sidebar-right .mod-login input[type="password"],
.bl-sidebar-right .mod-login input[type="email"],
.bl-sidebar-right .login input[type="text"],
.bl-sidebar-right .login input[type="password"],
.bl-sidebar-right .login input[type="email"] {
    min-height: 38px;
    height: 38px;
    padding: .48rem .8rem;
    border-radius: 999px;
    font-size: .86rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.bl-sidebar-right .input-group,
.bl-sidebar-right .controls,
.bl-sidebar-right .control-group {
    max-width: 100%;
}
.bl-sidebar-right .input-group {
    display: flex;
    gap: .4rem;
    align-items: center;
}
.bl-sidebar-right .input-group input {
    min-width: 0;
}
.bl-sidebar-right .input-group .btn,
.bl-sidebar-right .input-password-toggle,
.bl-sidebar-right button.input-password-toggle,
.bl-sidebar-right .btn-secondary {
    min-height: 34px;
    height: auto;
    width: auto;
    padding: .42rem .65rem;
    border-radius: 999px;
    font-size: .72rem;
    line-height: 1.1;
    white-space: nowrap;
    color: #fff;
}
.bl-sidebar-right .mod-login .btn,
.bl-sidebar-right .mod-login button,
.bl-sidebar-right .mod-login input[type="submit"],
.bl-sidebar-right .login .btn,
.bl-sidebar-right .login button,
.bl-sidebar-right .login input[type="submit"] {
    min-height: 34px;
    width: auto;
    max-width: 100%;
    padding: .44rem .85rem;
    border-radius: 999px;
    font-size: .76rem;
    line-height: 1.15;
    letter-spacing: .04em;
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.bl-sidebar-right .mod-login__submit,
.bl-sidebar-right .login .control-group:last-of-type {
    margin-top: .2rem;
}
.bl-sidebar-right .mod-login__submit .btn,
.bl-sidebar-right .login button[type="submit"],
.bl-sidebar-right .login input[type="submit"] {
    min-width: 78px;
}
.bl-sidebar-right .form-check,
.bl-sidebar-right .mod-login__remember {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: .25rem 0;
}
.bl-sidebar-right input[type="checkbox"] {
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
    padding: 0;
    border-radius: 4px;
}
/* Make Joomla/WebAuthn passkey buttons look like a clean secondary action instead of a huge green badge. */
.bl-sidebar-right .mod-login [class*="webauthn"],
.bl-sidebar-right .mod-login [id*="webauthn"],
.bl-sidebar-right .mod-login [class*="passkey"],
.bl-sidebar-right .mod-login [id*="passkey"],
.bl-sidebar-right .login [class*="webauthn"],
.bl-sidebar-right .login [id*="webauthn"],
.bl-sidebar-right .login [class*="passkey"],
.bl-sidebar-right .login [id*="passkey"] {
    max-width: 100%;
}
.bl-sidebar-right .mod-login [class*="webauthn"] .btn,
.bl-sidebar-right .mod-login [id*="webauthn"] .btn,
.bl-sidebar-right .mod-login [class*="passkey"] .btn,
.bl-sidebar-right .mod-login [id*="passkey"] .btn,
.bl-sidebar-right .mod-login button[class*="webauthn"],
.bl-sidebar-right .mod-login button[id*="webauthn"],
.bl-sidebar-right .mod-login button[class*="passkey"],
.bl-sidebar-right .mod-login button[id*="passkey"],
.bl-sidebar-right .login [class*="webauthn"] .btn,
.bl-sidebar-right .login [id*="webauthn"] .btn,
.bl-sidebar-right .login [class*="passkey"] .btn,
.bl-sidebar-right .login [id*="passkey"] .btn,
.bl-sidebar-right .login button[class*="webauthn"],
.bl-sidebar-right .login button[id*="webauthn"],
.bl-sidebar-right .login button[class*="passkey"],
.bl-sidebar-right .login button[id*="passkey"] {
    width: 100%;
    min-height: 38px;
    justify-content: center;
    gap: .45rem;
    padding: .5rem .7rem;
    border: 1px solid rgba(0, 122, 85, .24);
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff, #eef5f1);
    color: #064c36;
    box-shadow: inset 0 1px rgba(255,255,255,.9), 0 6px 14px rgba(0,0,0,.08);
    text-shadow: none;
}
.bl-sidebar-right .mod-login svg,
.bl-sidebar-right .login svg,
.bl-sidebar-right .mod-login [class^="icon-"],
.bl-sidebar-right .mod-login [class*=" icon-"],
.bl-sidebar-right .login [class^="icon-"],
.bl-sidebar-right .login [class*=" icon-"] {
    width: 1rem !important;
    height: 1rem !important;
    max-width: 1rem !important;
    max-height: 1rem !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    margin: 0 .35rem 0 0 !important;
    transform: none !important;
}
.bl-sidebar-right .mod-login ul,
.bl-sidebar-right .login ul {
    margin: .65rem 0 0 1rem;
    padding: 0;
    font-size: .86rem;
}
.bl-sidebar-right .mod-login li,
.bl-sidebar-right .login li {
    margin: .25rem 0;
}

@media (max-width: 900px) {
    .bl-brand img { width: min(450px, 86vw); }
    .bl-top-menu a,
    .bl-top-menu .nav-link { min-height: 34px; }
}


/* v1.0.9 Joomla login module refinement: cleaner fields and icon-only password toggle. */
.bl-sidebar-right .mod-login,
.bl-sidebar-right .login,
.bl-sidebar-right form[id*="login"] {
    display: block;
    width: 100%;
}

.bl-sidebar-right .mod-login .control-group,
.bl-sidebar-right .mod-login .form-group,
.bl-sidebar-right .mod-login__username,
.bl-sidebar-right .mod-login__password,
.bl-sidebar-right .mod-login__remember,
.bl-sidebar-right .login .control-group,
.bl-sidebar-right .login .form-group {
    display: flex;
    flex-direction: column;
    gap: .28rem;
    margin: 0 0 .68rem;
    width: 100%;
}

.bl-sidebar-right .mod-login label,
.bl-sidebar-right .login label,
.bl-sidebar-right form[id*="login"] label,
.bl-sidebar-right .control-label {
    order: -1;
    display: block;
    margin: 0;
    padding: 0;
    color: #11201a;
    font-size: .78rem;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: .01em;
}

.bl-sidebar-right .mod-login .controls,
.bl-sidebar-right .login .controls,
.bl-sidebar-right .mod-login .input-group,
.bl-sidebar-right .login .input-group,
.bl-sidebar-right .mod-login .password-group,
.bl-sidebar-right .login .password-group {
    width: 100%;
    min-width: 0;
}

.bl-sidebar-right .mod-login input[type="text"],
.bl-sidebar-right .mod-login input[type="password"],
.bl-sidebar-right .mod-login input[type="email"],
.bl-sidebar-right .mod-login input[type="username"],
.bl-sidebar-right .login input[type="text"],
.bl-sidebar-right .login input[type="password"],
.bl-sidebar-right .login input[type="email"],
.bl-sidebar-right form[id*="login"] input[type="text"],
.bl-sidebar-right form[id*="login"] input[type="password"],
.bl-sidebar-right form[id*="login"] input[type="email"] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 40px;
    height: 40px;
    padding: .55rem .82rem;
    border: 1px solid rgba(4, 76, 54, .20);
    border-radius: 12px;
    background: #fff;
    color: #07100d;
    font-size: .88rem;
    font-weight: 650;
    line-height: 1.2;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 6px 14px rgba(0,0,0,.06);
}

.bl-sidebar-right .mod-login input::placeholder,
.bl-sidebar-right .login input::placeholder,
.bl-sidebar-right form[id*="login"] input::placeholder {
    color: rgba(7,16,13,.48);
    font-weight: 500;
}

.bl-sidebar-right .mod-login .input-group,
.bl-sidebar-right .login .input-group,
.bl-sidebar-right form[id*="login"] .input-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: .42rem;
    align-items: center;
}

.bl-sidebar-right .mod-login .input-group input,
.bl-sidebar-right .login .input-group input,
.bl-sidebar-right form[id*="login"] .input-group input {
    grid-column: 1;
}

/* Icon-only show password button. Text remains in the DOM for screen readers, but is visually replaced. */
.bl-sidebar-right .input-password-toggle,
.bl-sidebar-right button.input-password-toggle,
.bl-sidebar-right .input-group .input-password-toggle,
.bl-sidebar-right .input-group button[aria-label*="password" i],
.bl-sidebar-right .input-group button[title*="password" i],
.bl-sidebar-right .input-group .btn-secondary,
.bl-sidebar-right .input-group .btn[class*="password"] {
    grid-column: 2;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(4, 76, 54, .24) !important;
    background: linear-gradient(180deg, #f8fbf9, #e8f1ec) !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden;
    box-shadow: inset 0 1px rgba(255,255,255,.9), 0 6px 14px rgba(0,0,0,.08) !important;
    text-shadow: none !important;
}

.bl-sidebar-right .input-password-toggle::before,
.bl-sidebar-right button.input-password-toggle::before,
.bl-sidebar-right .input-group button[aria-label*="password" i]::before,
.bl-sidebar-right .input-group button[title*="password" i]::before,
.bl-sidebar-right .input-group .btn-secondary::before,
.bl-sidebar-right .input-group .btn[class*="password"]::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: #064c36;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5Zm0 12.5a5 5 0 1 1 0-10a5 5 0 0 1 0 10Zm0-2a3 3 0 1 0 0-6a3 3 0 0 0 0 6Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5Zm0 12.5a5 5 0 1 1 0-10a5 5 0 0 1 0 10Zm0-2a3 3 0 1 0 0-6a3 3 0 0 0 0 6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bl-sidebar-right .input-password-toggle:hover,
.bl-sidebar-right button.input-password-toggle:hover,
.bl-sidebar-right .input-group button[aria-label*="password" i]:hover,
.bl-sidebar-right .input-group button[title*="password" i]:hover,
.bl-sidebar-right .input-group .btn-secondary:hover,
.bl-sidebar-right .input-group .btn[class*="password"]:hover {
    background: linear-gradient(180deg, #ffffff, #dcebe4) !important;
    border-color: rgba(0, 122, 85, .42) !important;
    transform: none !important;
}

.bl-sidebar-right .input-password-toggle span,
.bl-sidebar-right .input-password-toggle .visually-hidden,
.bl-sidebar-right button.input-password-toggle span,
.bl-sidebar-right .input-group .btn-secondary span {
    font-size: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.bl-sidebar-right .mod-login .btn,
.bl-sidebar-right .mod-login button:not(.input-password-toggle),
.bl-sidebar-right .mod-login input[type="submit"],
.bl-sidebar-right .login .btn,
.bl-sidebar-right .login button:not(.input-password-toggle),
.bl-sidebar-right .login input[type="submit"] {
    min-height: 36px;
    padding: .48rem .85rem;
    border-radius: 12px;
    font-size: .76rem;
    line-height: 1.1;
}

.bl-sidebar-right .mod-login__submit,
.bl-sidebar-right .login .mod-login__submit,
.bl-sidebar-right .login .control-group:last-of-type {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: .35rem 0 .45rem;
}

.bl-sidebar-right .form-check,
.bl-sidebar-right .mod-login__remember,
.bl-sidebar-right .login .remember {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    column-gap: .5rem;
    row-gap: .1rem;
    margin: .2rem 0 .7rem;
}

.bl-sidebar-right .form-check label,
.bl-sidebar-right .mod-login__remember label,
.bl-sidebar-right .login .remember label {
    order: 0;
    margin: 0;
    font-size: .78rem;
    font-weight: 750;
}

.bl-sidebar-right input[type="checkbox"] {
    grid-column: 1;
    margin: 0;
}

/* Keep passkey/WebAuthn as a compact secondary action, not a giant badge. */
.bl-sidebar-right .mod-login [class*="webauthn"] .btn,
.bl-sidebar-right .mod-login [id*="webauthn"] .btn,
.bl-sidebar-right .mod-login [class*="passkey"] .btn,
.bl-sidebar-right .mod-login [id*="passkey"] .btn,
.bl-sidebar-right .mod-login button[class*="webauthn"],
.bl-sidebar-right .mod-login button[id*="webauthn"],
.bl-sidebar-right .mod-login button[class*="passkey"],
.bl-sidebar-right .mod-login button[id*="passkey"],
.bl-sidebar-right .login [class*="webauthn"] .btn,
.bl-sidebar-right .login [id*="webauthn"] .btn,
.bl-sidebar-right .login [class*="passkey"] .btn,
.bl-sidebar-right .login [id*="passkey"] .btn,
.bl-sidebar-right .login button[class*="webauthn"],
.bl-sidebar-right .login button[id*="webauthn"],
.bl-sidebar-right .login button[class*="passkey"],
.bl-sidebar-right .login button[id*="passkey"] {
    display: inline-flex !important;
    width: 100% !important;
    min-height: 38px !important;
    padding: .52rem .75rem !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #ffffff, #edf4ef) !important;
    color: #064c36 !important;
    border: 1px solid rgba(4, 76, 54, .22) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.9), 0 6px 14px rgba(0,0,0,.08) !important;
    text-shadow: none !important;
}

/* v1.0.10 Login remember-me alignment fix.
   Joomla can output the remember checkbox as mod-login__remember, form-check,
   or a generic control-group. Keep it as a compact horizontal row under the password field. */
.bl-sidebar-right #form-login-remember,
.bl-sidebar-right .mod-login__remember,
.bl-sidebar-right .login .remember,
.bl-sidebar-right .control-group:has(input[type="checkbox"][name="remember"]),
.bl-sidebar-right .form-group:has(input[type="checkbox"][name="remember"]) {
    display: block !important;
    width: 100% !important;
    margin: .2rem 0 .75rem !important;
    padding: 0 !important;
    text-align: left !important;
}

.bl-sidebar-right #form-login-remember .controls,
.bl-sidebar-right #form-login-remember .form-check,
.bl-sidebar-right .mod-login__remember .controls,
.bl-sidebar-right .mod-login__remember .form-check,
.bl-sidebar-right .login .remember .controls,
.bl-sidebar-right .login .remember .form-check,
.bl-sidebar-right .control-group:has(input[type="checkbox"][name="remember"]) .controls,
.bl-sidebar-right .form-group:has(input[type="checkbox"][name="remember"]) .controls {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .48rem !important;
    width: 100% !important;
    min-height: 24px !important;
    text-align: left !important;
}

.bl-sidebar-right #form-login-remember label,
.bl-sidebar-right .mod-login__remember label,
.bl-sidebar-right .login .remember label,
.bl-sidebar-right .control-group:has(input[type="checkbox"][name="remember"]) label,
.bl-sidebar-right .form-group:has(input[type="checkbox"][name="remember"]) label,
.bl-sidebar-right label[for*="remember" i] {
    order: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #11201a !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: .01em !important;
    text-align: left !important;
    white-space: nowrap !important;
}

.bl-sidebar-right #form-login-remember input[type="checkbox"],
.bl-sidebar-right .mod-login__remember input[type="checkbox"],
.bl-sidebar-right .login .remember input[type="checkbox"],
.bl-sidebar-right input[type="checkbox"][name="remember"] {
    order: 1 !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    display: inline-block !important;
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    accent-color: #007a55;
    box-shadow: none !important;
}

.bl-sidebar-right .mod-login__submit,
.bl-sidebar-right .login .mod-login__submit,
.bl-sidebar-right .login .control-group:last-of-type {
    justify-content: flex-start !important;
    width: 100% !important;
}

.bl-sidebar-right .mod-login__submit .btn,
.bl-sidebar-right .login button[type="submit"],
.bl-sidebar-right .login input[type="submit"] {
    margin-top: .15rem !important;
}

/* v1.0.11 Top Login position: slim horizontal login at top-right above the logo. */
.bl-top-login-area {
    position: relative;
    z-index: 30;
    padding: .35rem 0 0;
}

.bl-top-login-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 36px;
}

.bl-top-login-area .moduletable,
.bl-top-login-area .card,
.bl-top-login-area .well {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.bl-top-login-area .moduletable > h3,
.bl-top-login-area .card-header,
.bl-top-login-area h1,
.bl-top-login-area h2,
.bl-top-login-area h3,
.bl-top-login-area h4 {
    display: none !important;
}

.bl-top-login-area .mod-login,
.bl-top-login-area .login,
.bl-top-login-area form[id*="login"],
.bl-top-login-area form {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: .4rem !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: .38rem .5rem !important;
    border: 1px solid rgba(255, 173, 24, .34) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(6,38,27,.58)) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.06), 0 12px 34px rgba(0,0,0,.32) !important;
    backdrop-filter: blur(6px);
}

.bl-top-login-area .control-group,
.bl-top-login-area .form-group,
.bl-top-login-area .mod-login__username,
.bl-top-login-area .mod-login__password,
.bl-top-login-area .mod-login__submit,
.bl-top-login-area .login .control-group,
.bl-top-login-area .login .form-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .35rem !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bl-top-login-area .controls,
.bl-top-login-area .input-group,
.bl-top-login-area .password-group {
    display: flex !important;
    align-items: center !important;
    gap: .35rem !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Keep labels accessible but visually compact in the top bar. */
.bl-top-login-area label:not([for*="remember" i]),
.bl-top-login-area .control-label:not([for*="remember" i]) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
}

.bl-top-login-area input[type="text"],
.bl-top-login-area input[type="password"],
.bl-top-login-area input[type="email"],
.bl-top-login-area input[type="username"] {
    width: 150px !important;
    min-width: 130px !important;
    max-width: 170px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: .42rem .72rem !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.96) !important;
    color: #07100d !important;
    font-size: .82rem !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    box-shadow: inset 0 1px rgba(255,255,255,.9), 0 8px 18px rgba(0,0,0,.20) !important;
}

.bl-top-login-area input::placeholder {
    color: rgba(7,16,13,.50) !important;
    font-weight: 550 !important;
}

.bl-top-login-area .input-password-toggle,
.bl-top-login-area button.input-password-toggle,
.bl-top-login-area .input-group .input-password-toggle,
.bl-top-login-area .input-group button[aria-label*="password" i],
.bl-top-login-area .input-group button[title*="password" i],
.bl-top-login-area .input-group .btn-secondary,
.bl-top-login-area .input-group .btn[class*="password"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 173, 24, .32) !important;
    background: linear-gradient(180deg, rgba(255,173,24,.92), rgba(216,137,0,.96)) !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    box-shadow: inset 0 1px rgba(255,255,255,.35), 0 8px 18px rgba(0,0,0,.18) !important;
    text-shadow: none !important;
}

.bl-top-login-area .input-password-toggle::before,
.bl-top-login-area button.input-password-toggle::before,
.bl-top-login-area .input-group button[aria-label*="password" i]::before,
.bl-top-login-area .input-group button[title*="password" i]::before,
.bl-top-login-area .input-group .btn-secondary::before,
.bl-top-login-area .input-group .btn[class*="password"]::before {
    content: "";
    display: block;
    width: 17px;
    height: 17px;
    background: #07100d;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5Zm0 12.5a5 5 0 1 1 0-10a5 5 0 0 1 0 10Zm0-2a3 3 0 1 0 0-6a3 3 0 0 0 0 6Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5Zm0 12.5a5 5 0 1 1 0-10a5 5 0 0 1 0 10Zm0-2a3 3 0 1 0 0-6a3 3 0 0 0 0 6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bl-top-login-area .input-password-toggle span,
.bl-top-login-area button.input-password-toggle span,
.bl-top-login-area .input-group .btn-secondary span {
    font-size: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.bl-top-login-area .mod-login button:not(.input-password-toggle),
.bl-top-login-area .mod-login input[type="submit"],
.bl-top-login-area .login button:not(.input-password-toggle),
.bl-top-login-area .login input[type="submit"],
.bl-top-login-area button[type="submit"],
.bl-top-login-area input[type="submit"] {
    width: auto !important;
    min-width: 72px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: .4rem .78rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 173, 24, .45) !important;
    background: linear-gradient(180deg, var(--bl-logo-orange-bright), var(--bl-logo-orange)) !important;
    color: #07100d !important;
    font-size: .74rem !important;
    font-weight: 950 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    box-shadow: inset 0 1px rgba(255,255,255,.35), 0 10px 22px rgba(0,0,0,.24) !important;
}

/* Keep the top login very slim: hide remember, forgot links, and bulky passkey/WebAuthn extras in this position. */
.bl-top-login-area #form-login-remember,
.bl-top-login-area .mod-login__remember,
.bl-top-login-area .remember,
.bl-top-login-area .form-check:has(input[type="checkbox"][name="remember"]),
.bl-top-login-area .control-group:has(input[type="checkbox"][name="remember"]),
.bl-top-login-area ul,
.bl-top-login-area .mod-login__options,
.bl-top-login-area [class*="webauthn"],
.bl-top-login-area [id*="webauthn"],
.bl-top-login-area [class*="passkey"],
.bl-top-login-area [id*="passkey"] {
    display: none !important;
}

/* Logged-in view in Top Login. */
.bl-top-login-area .mod-login__userdata,
.bl-top-login-area .userdata,
.bl-top-login-area .login-greeting,
.bl-top-login-area .mod-login__greeting {
    display: inline-flex !important;
    align-items: center !important;
    gap: .45rem !important;
    margin: 0 !important;
    color: var(--bl-logo-orange-bright) !important;
    font-size: .82rem !important;
    font-weight: 850 !important;
    text-shadow: 1px 1px 0 rgba(0,0,0,.7);
}


/* v1.0.19 Top Login logged-in profile link.
   Shows a clear My Profile action for logged-in users so they can edit their Joomla/BEERLEAGUE profile fields. */
.bl-top-login-area .bl-login-userdata {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: .45rem !important;
}

.bl-top-login-area .bl-profile-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 88px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: .4rem .78rem !important;
    border-radius: var(--bl-radius-md) !important;
    border: 1px solid rgba(255, 173, 24, .45) !important;
    background: linear-gradient(180deg, rgba(255,173,24,.96), rgba(216,137,0,.98)) !important;
    color: #07100d !important;
    font-size: .74rem !important;
    font-weight: 950 !important;
    letter-spacing: .045em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: inset 0 1px rgba(255,255,255,.35), 0 10px 22px rgba(0,0,0,.24) !important;
}

.bl-top-login-area .bl-profile-btn:hover,
.bl-top-login-area .bl-profile-btn:focus {
    color: #07100d !important;
    text-decoration: none !important;
    filter: brightness(1.06);
}

.bl-top-login-area .bl-login-logout-action {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
}

@media (max-width: 640px) {
    .bl-top-login-area .bl-login-userdata {
        width: 100% !important;
        justify-content: center !important;
    }
}

@media (max-width: 900px) {
    .bl-top-login-inner {
        justify-content: center;
    }
    .bl-top-login-area .mod-login,
    .bl-top-login-area .login,
    .bl-top-login-area form[id*="login"],
    .bl-top-login-area form {
        justify-content: center !important;
        border-radius: 18px !important;
    }
}

@media (max-width: 640px) {
    .bl-top-login-area .mod-login,
    .bl-top-login-area .login,
    .bl-top-login-area form[id*="login"],
    .bl-top-login-area form {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: .45rem !important;
    }
    .bl-top-login-area .control-group,
    .bl-top-login-area .form-group,
    .bl-top-login-area .mod-login__username,
    .bl-top-login-area .mod-login__password,
    .bl-top-login-area .mod-login__submit,
    .bl-top-login-area .controls,
    .bl-top-login-area .input-group,
    .bl-top-login-area .password-group {
        width: 100% !important;
    }
    .bl-top-login-area input[type="text"],
    .bl-top-login-area input[type="password"],
    .bl-top-login-area input[type="email"],
    .bl-top-login-area input[type="username"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    .bl-top-login-area .input-group,
    .bl-top-login-area .password-group {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 34px !important;
    }
}

/* v1.0.12 squared/slimline refresh.
   Less pill-shaped UI, more Counter-Strike server-panel style with tasteful small radii. */
:root {
    --bl-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --bl-font-display: var(--bl-font-body);
    --bl-radius: 10px;
    --bl-radius-sm: 6px;
    --bl-radius-md: 8px;
    --bl-radius-lg: 12px;
}

/* General shape cleanup: keep slight rounding, remove oversized pill look. */
.bl-top-menu,
.bl-top-search-area,
.bl-beerleague-nav-area,
.bl-content-card,
.bl-featured-articles .moduletable,
.bl-featured-articles article,
.bl-featured-articles .newsflash-item,
.bl-featured-articles .mod-articlesnews__item,
.bl-feature-card,
.bl-sidebar-right .moduletable,
.bl-sidebar-right .card,
.bl-sidebar-right .well,
.bl-stat-table-wrap,
.bl-stat-card,
.card,
.well,
.alert,
.joomla-alert {
    border-radius: var(--bl-radius-lg) !important;
}

.bl-top-menu a,
.bl-top-menu .nav-link,
.bl-btn,
.btn,
button,
input[type="submit"],
.bl-pill,
.bl-pagination a,
.bl-pagination span,
.bl-stats-shell .bl-stats-nav .bl-btn,
.bl-beerleague-nav-area .bl-btn,
.bl-stats-nav .bl-btn,
.bl-featured-articles .readmore a,
.bl-featured-articles .btn {
    border-radius: var(--bl-radius-md) !important;
}

input,
select,
textarea,
.bl-top-search-area input[type="search"],
.bl-top-search-area input[type="text"],
.bl-stats-search input[type="search"],
.bl-stats-search input[type="text"] {
    border-radius: var(--bl-radius-md) !important;
}

textarea {
    border-radius: var(--bl-radius-lg) !important;
}

.bl-top-menu {
    padding: .26rem;
    border-color: rgba(255, 173, 24, .22);
}

.bl-top-menu a,
.bl-top-menu .nav-link {
    min-height: 32px;
    padding: .46rem .8rem;
}

.bl-top-search-area {
    padding: .48rem .6rem;
}

.bl-brand {
    margin-top: .05rem;
    margin-bottom: .48rem;
}

.bl-brand img {
    width: min(560px, 78vw);
}

/* Top Login: make username/password look intentional, compact, and integrated with the header. */
.bl-top-login-area {
    padding: .42rem 0 0;
}

.bl-top-login-inner {
    min-height: 34px;
}

.bl-top-login-area .mod-login,
.bl-top-login-area .login,
.bl-top-login-area form[id*="login"],
.bl-top-login-area form {
    gap: .35rem !important;
    padding: .32rem .38rem !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 173, 24, .30) !important;
    background:
        linear-gradient(90deg, rgba(255,173,24,.10), transparent 16%),
        linear-gradient(180deg, rgba(2, 6, 5, .92), rgba(6, 38, 27, .82)) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.055), 0 10px 26px rgba(0,0,0,.30) !important;
}

.bl-top-login-area .control-group,
.bl-top-login-area .form-group,
.bl-top-login-area .mod-login__username,
.bl-top-login-area .mod-login__password,
.bl-top-login-area .mod-login__submit,
.bl-top-login-area .login .control-group,
.bl-top-login-area .login .form-group {
    gap: .28rem !important;
}

.bl-top-login-area .controls,
.bl-top-login-area .input-group,
.bl-top-login-area .password-group {
    gap: .28rem !important;
}

.bl-top-login-area input[type="text"],
.bl-top-login-area input[type="password"],
.bl-top-login-area input[type="email"],
.bl-top-login-area input[type="username"] {
    width: 136px !important;
    min-width: 122px !important;
    max-width: 150px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: .42rem .62rem !important;
    border-radius: 7px !important;
    border: 1px solid rgba(0, 208, 132, .24) !important;
    background: rgba(246, 250, 248, .98) !important;
    color: #07100d !important;
    font-size: .8rem !important;
    font-weight: 700 !important;
    box-shadow: inset 0 1px rgba(255,255,255,.92), 0 5px 14px rgba(0,0,0,.22) !important;
}

.bl-top-login-area input[type="text"]:focus,
.bl-top-login-area input[type="password"]:focus,
.bl-top-login-area input[type="email"]:focus,
.bl-top-login-area input[type="username"]:focus {
    outline: none !important;
    border-color: rgba(255, 173, 24, .72) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.92), 0 0 0 2px rgba(255,173,24,.16), 0 5px 14px rgba(0,0,0,.22) !important;
}

.bl-top-login-area input::placeholder {
    color: rgba(7, 16, 13, .42) !important;
}

.bl-top-login-area .input-password-toggle,
.bl-top-login-area button.input-password-toggle,
.bl-top-login-area .input-group .input-password-toggle,
.bl-top-login-area .input-group button[aria-label*="password" i],
.bl-top-login-area .input-group button[title*="password" i],
.bl-top-login-area .input-group .btn-secondary,
.bl-top-login-area .input-group .btn[class*="password"] {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 7px !important;
    border-color: rgba(255, 173, 24, .40) !important;
    background: linear-gradient(180deg, #f2a915, #bd7600) !important;
}

.bl-top-login-area .input-password-toggle::before,
.bl-top-login-area button.input-password-toggle::before,
.bl-top-login-area .input-group button[aria-label*="password" i]::before,
.bl-top-login-area .input-group button[title*="password" i]::before,
.bl-top-login-area .input-group .btn-secondary::before,
.bl-top-login-area .input-group .btn[class*="password"]::before {
    width: 16px;
    height: 16px;
}

.bl-top-login-area .mod-login button:not(.input-password-toggle),
.bl-top-login-area .mod-login input[type="submit"],
.bl-top-login-area .login button:not(.input-password-toggle),
.bl-top-login-area .login input[type="submit"],
.bl-top-login-area button[type="submit"],
.bl-top-login-area input[type="submit"] {
    min-width: 66px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: .38rem .68rem !important;
    border-radius: 7px !important;
    background: linear-gradient(180deg, #ffb320, #d88900) !important;
    border-color: rgba(255, 190, 53, .55) !important;
    color: #07100d !important;
    font-size: .72rem !important;
    box-shadow: inset 0 1px rgba(255,255,255,.36), 0 6px 16px rgba(0,0,0,.22) !important;
}

.bl-top-login-area .mod-login button:not(.input-password-toggle):hover,
.bl-top-login-area .mod-login input[type="submit"]:hover,
.bl-top-login-area .login button:not(.input-password-toggle):hover,
.bl-top-login-area .login input[type="submit"]:hover,
.bl-top-login-area button[type="submit"]:hover,
.bl-top-login-area input[type="submit"]:hover {
    background: linear-gradient(180deg, #ffc04a, #e0950b) !important;
    transform: translateY(-1px);
}

/* Sidebar login should also use smaller squared controls. */
.bl-sidebar-right .mod-login input[type="text"],
.bl-sidebar-right .mod-login input[type="password"],
.bl-sidebar-right .mod-login input[type="email"],
.bl-sidebar-right .mod-login input[type="username"],
.bl-sidebar-right .login input[type="text"],
.bl-sidebar-right .login input[type="password"],
.bl-sidebar-right .login input[type="email"],
.bl-sidebar-right form[id*="login"] input[type="text"],
.bl-sidebar-right form[id*="login"] input[type="password"],
.bl-sidebar-right form[id*="login"] input[type="email"],
.bl-sidebar-right .input-password-toggle,
.bl-sidebar-right button.input-password-toggle,
.bl-sidebar-right .input-group .input-password-toggle,
.bl-sidebar-right .input-group button[aria-label*="password" i],
.bl-sidebar-right .input-group button[title*="password" i],
.bl-sidebar-right .input-group .btn-secondary,
.bl-sidebar-right .input-group .btn[class*="password"],
.bl-sidebar-right .mod-login .btn,
.bl-sidebar-right .mod-login button:not(.input-password-toggle),
.bl-sidebar-right .mod-login input[type="submit"],
.bl-sidebar-right .login .btn,
.bl-sidebar-right .login button:not(.input-password-toggle),
.bl-sidebar-right .login input[type="submit"] {
    border-radius: 8px !important;
}

.bl-sidebar-right input[type="checkbox"] {
    border-radius: 3px !important;
}

@media (max-width: 900px) {
    .bl-top-login-area .mod-login,
    .bl-top-login-area .login,
    .bl-top-login-area form[id*="login"],
    .bl-top-login-area form {
        border-radius: 10px !important;
    }
}


/* v1.0.13 sharper/slimmer pass.
   Reduce oversized rounding, tighten vertical rhythm, and add intentional breathing room around the logo. */
:root {
    --bl-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --bl-font-display: var(--bl-font-body);
    --bl-radius: 6px;
    --bl-radius-sm: 3px;
    --bl-radius-md: 4px;
    --bl-radius-lg: 6px;
}

/* Make the header logo the focus without making the whole header bulky. */
.bl-site-header {
    padding-top: .85rem !important;
    padding-bottom: .55rem !important;
}
.bl-header-inner {
    width: min(1140px, calc(100% - 32px)) !important;
}
.bl-brand {
    margin: .65rem auto .85rem !important;
    padding: .1rem 0 !important;
}
.bl-brand img {
    width: min(575px, 80vw) !important;
}

/* Much squarer global shape language. */
.bl-top-menu,
.bl-top-search-area,
.bl-beerleague-nav-area,
.bl-content-card,
.bl-featured-articles .moduletable,
.bl-featured-articles article,
.bl-featured-articles .newsflash-item,
.bl-featured-articles .mod-articlesnews__item,
.bl-feature-card,
.bl-sidebar-right .moduletable,
.bl-sidebar-right .card,
.bl-sidebar-right .well,
.bl-stat-table-wrap,
.bl-stat-card,
.card,
.well,
.alert,
.joomla-alert,
.bl-player-match-card,
.bl-player-hero-card,
.bl-player-list-card,
.bl-player-metric-card,
.bl-player-section-card,
.bl-sort-controls {
    border-radius: 6px !important;
}

.bl-top-menu a,
.bl-top-menu .nav-link,
.bl-btn,
.btn,
button,
input[type="submit"],
.bl-pill,
.bl-pagination a,
.bl-pagination span,
.bl-stats-shell .bl-stats-nav .bl-btn,
.bl-beerleague-nav-area .bl-btn,
.bl-stats-nav .bl-btn,
.bl-featured-articles .readmore a,
.bl-featured-articles .btn,
.bl-outcome-badge,
.bl-pm-map,
.bl-pm-meta-row span,
.bl-player-quick-pills span,
.bl-compact-record,
.bl-mini-match,
.bl-empty-records {
    border-radius: 4px !important;
}

input,
select,
textarea,
.bl-top-search-area input[type="search"],
.bl-top-search-area input[type="text"],
.bl-stats-search input[type="search"],
.bl-stats-search input[type="text"],
.bl-sort-controls select,
.bl-sidebar-right .mod-login input[type="text"],
.bl-sidebar-right .mod-login input[type="password"],
.bl-sidebar-right .mod-login input[type="email"],
.bl-sidebar-right .login input[type="text"],
.bl-sidebar-right .login input[type="password"],
.bl-sidebar-right .login input[type="email"] {
    border-radius: 4px !important;
}

/* Slimmer vertical rhythm site-wide. */
.bl-container { width: min(1380px, calc(100% - 32px)) !important; }
.bl-top-login-area { padding-top: .3rem !important; }
.bl-top-login-inner { min-height: 30px !important; }
.bl-top-login-area .mod-login,
.bl-top-login-area .login,
.bl-top-login-area form[id*="login"],
.bl-top-login-area form {
    padding: .24rem .32rem !important;
    gap: .28rem !important;
    border-radius: 5px !important;
}
.bl-top-login-area input[type="text"],
.bl-top-login-area input[type="password"],
.bl-top-login-area input[type="email"],
.bl-top-login-area input[type="username"],
.bl-top-login-area .input-password-toggle,
.bl-top-login-area button.input-password-toggle,
.bl-top-login-area .input-group .input-password-toggle,
.bl-top-login-area .input-group button[aria-label*="password" i],
.bl-top-login-area .input-group button[title*="password" i],
.bl-top-login-area .input-group .btn-secondary,
.bl-top-login-area .input-group .btn[class*="password"],
.bl-top-login-area button[type="submit"],
.bl-top-login-area input[type="submit"] {
    height: 30px !important;
    min-height: 30px !important;
    border-radius: 4px !important;
}
.bl-top-login-area input[type="text"],
.bl-top-login-area input[type="password"],
.bl-top-login-area input[type="email"],
.bl-top-login-area input[type="username"] {
    width: 132px !important;
    padding: .34rem .55rem !important;
    font-size: .78rem !important;
}
.bl-top-login-area .input-password-toggle,
.bl-top-login-area button.input-password-toggle,
.bl-top-login-area .input-group .input-password-toggle,
.bl-top-login-area .input-group button[aria-label*="password" i],
.bl-top-login-area .input-group button[title*="password" i],
.bl-top-login-area .input-group .btn-secondary,
.bl-top-login-area .input-group .btn[class*="password"] {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
}
.bl-top-login-area button[type="submit"],
.bl-top-login-area input[type="submit"] {
    min-width: 62px !important;
    padding: .32rem .6rem !important;
    font-size: .7rem !important;
}

.bl-top-menu {
    margin-bottom: .42rem !important;
    padding: .2rem !important;
    border-radius: 6px !important;
}
.bl-top-menu ul { gap: .28rem !important; }
.bl-top-menu a,
.bl-top-menu .nav-link {
    min-height: 29px !important;
    padding: .38rem .72rem !important;
    font-size: .78rem !important;
}
.bl-top-search-area {
    margin: .35rem auto .48rem !important;
    padding: .4rem .5rem !important;
    border-radius: 6px !important;
}
.bl-top-search-area .bl-stats-search,
.bl-stats-search {
    gap: .38rem !important;
}
.bl-top-search-area .bl-stats-search form,
.bl-stats-search form,
.bl-top-search-area form {
    gap: .35rem !important;
}
.bl-top-search-area input[type="search"],
.bl-top-search-area input[type="text"],
.bl-stats-search input[type="search"],
.bl-stats-search input[type="text"] {
    height: 34px !important;
    min-height: 34px !important;
    padding: .4rem .68rem !important;
    font-size: .84rem !important;
}
.bl-top-search-area button,
.bl-top-search-area input[type="submit"],
.bl-stats-search button {
    height: 34px !important;
    min-height: 34px !important;
    padding: .4rem .68rem !important;
    font-size: .74rem !important;
}
.bl-beerleague-nav-area {
    margin: .12rem auto .5rem !important;
    padding: .12rem .25rem !important;
}
.bl-beerleague-nav-area .bl-stats-nav,
.bl-beerleague-nav-area .bl-module-stats-nav,
.bl-stats-nav {
    gap: .38rem !important;
    margin: .32rem auto .55rem !important;
}
.bl-beerleague-nav-area .bl-btn,
.bl-stats-nav .bl-btn,
.bl-btn,
.btn,
button,
input[type="submit"] {
    min-height: 32px !important;
    padding: .42rem .75rem !important;
    font-size: .76rem !important;
}
.bl-main { padding-top: .35rem !important; }
.bl-layout { gap: .75rem !important; }
.bl-content-card { padding: .7rem !important; }
.bl-sidebar-right .moduletable,
.bl-sidebar-right .card,
.bl-sidebar-right .well {
    padding: .7rem !important;
    margin-bottom: .75rem !important;
    border-radius: 6px !important;
}
.bl-sidebar-right .moduletable > h3,
.bl-sidebar-right h3 {
    margin-bottom: .5rem !important;
}

/* Tighter generic content and table controls. */
.page-header h1,
.page-header h2,
h1,
h2,
h3 { margin-top: .25rem; margin-bottom: .55rem; }
th, td { padding: .42rem !important; }
.bl-card-grid { gap: .6rem !important; }
.bl-stat-card { padding: .65rem !important; }
.bl-pagination { margin-top: .65rem !important; gap: .32rem !important; }
.bl-pagination a,
.bl-pagination span {
    min-width: 30px !important;
    min-height: 30px !important;
    padding: .25rem .48rem !important;
}

@media (max-width: 900px) {
    .bl-brand { margin: .45rem auto .65rem !important; }
    .bl-brand img { width: min(470px, 88vw) !important; }
    .bl-content-card { padding: .6rem !important; }
}


/* v1.0.14 logo breathing room.
   Adds clear vertical space around the BEERLEAGUE logo so it becomes the main header focus. */
.bl-site-header {
    padding-top: 1.4rem !important;
    padding-bottom: 1.25rem !important;
}

.bl-top-login-area {
    padding-top: .45rem !important;
    margin-bottom: .9rem !important;
}

.bl-brand {
    margin-top: 2rem !important;
    margin-bottom: 2.15rem !important;
    padding-top: .45rem !important;
    padding-bottom: .45rem !important;
}

.bl-brand img {
    width: min(585px, 80vw) !important;
}

.bl-top-menu {
    margin-top: .2rem !important;
}

@media (max-width: 900px) {
    .bl-site-header {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    .bl-top-login-area {
        margin-bottom: .65rem !important;
    }
    .bl-brand {
        margin-top: 1.35rem !important;
        margin-bottom: 1.45rem !important;
        padding-top: .3rem !important;
        padding-bottom: .3rem !important;
    }
    .bl-brand img {
        width: min(500px, 88vw) !important;
    }
}

/* v1.0.15 - horizontal gaming/HUD style breadcrumbs. */
.bl-breadcrumbs {
    margin: 0 0 .9rem;
    color: var(--bl-muted);
    font-size: .82rem;
}

.bl-breadcrumbs ol,
.bl-breadcrumbs ul,
.bl-breadcrumbs .breadcrumb {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: .35rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    counter-reset: none !important;
}

.bl-breadcrumbs li,
.bl-breadcrumbs .breadcrumb-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: .35rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    color: rgba(243, 247, 245, .75);
    font-weight: 750;
    line-height: 1.2;
}

.bl-breadcrumbs li::marker,
.bl-breadcrumbs .breadcrumb-item::marker {
    content: "" !important;
}

.bl-breadcrumbs .breadcrumb-item + .breadcrumb-item::before,
.bl-breadcrumbs li + li::before {
    content: "▶" !important;
    display: inline-flex !important;
    align-items: center;
    color: var(--bl-logo-orange-bright) !important;
    font-size: .72rem;
    line-height: 1;
    opacity: .95;
    text-shadow: 0 0 10px rgba(255, 173, 24, .3);
}

.bl-breadcrumbs .divider,
.bl-breadcrumbs .breadcrumb-divider,
.bl-breadcrumbs .icon-location,
.bl-breadcrumbs .divider img {
    display: none !important;
}

.bl-breadcrumbs a {
    color: var(--bl-green-bright);
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.bl-breadcrumbs a:hover,
.bl-breadcrumbs a:focus {
    color: var(--bl-logo-orange-bright);
}

.bl-breadcrumbs .active,
.bl-breadcrumbs span[itemprop="name"] {
    color: rgba(255, 255, 255, .86);
    text-transform: uppercase;
    letter-spacing: .035em;
}

/* v1.0.17 - hide Joomla article meta/details block above article content. */
.com-content-article .article-info,
.com-content-article dl.article-info,
.com-content-article .article-info-term,
.item-page .article-info,
.item-page dl.article-info,
.item-page .article-info-term,
.view-article .article-info,
.view-article dl.article-info,
.view-article .article-info-term {
    display: none !important;
}


/* v1.0.17: remove yellow/orange outlines from the top menu shell and top login bar. */
.bl-top-menu {
    border-color: rgba(0, 208, 132, .18) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.035), 0 10px 28px rgba(0,0,0,.22) !important;
}
.bl-top-menu a,
.bl-top-menu .nav-link {
    border-color: transparent !important;
}
.bl-top-menu a:hover,
.bl-top-menu a:focus,
.bl-top-menu .current > a,
.bl-top-menu .active > a,
.bl-top-menu .active .nav-link {
    border-color: transparent !important;
    box-shadow: inset 0 1px rgba(255,255,255,.24), 0 7px 16px rgba(0,0,0,.18) !important;
}
.bl-top-login-area .mod-login,
.bl-top-login-area .login,
.bl-top-login-area form[id*="login"],
.bl-top-login-area form {
    border-color: rgba(0, 208, 132, .20) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.24) !important;
}
.bl-top-login-area .input-password-toggle,
.bl-top-login-area button.input-password-toggle,
.bl-top-login-area .input-group .input-password-toggle,
.bl-top-login-area .input-group button[aria-label*="password" i],
.bl-top-login-area .input-group button[title*="password" i],
.bl-top-login-area .input-group .btn-secondary,
.bl-top-login-area .input-group .btn[class*="password"] {
    border-color: rgba(0, 208, 132, .26) !important;
}
.bl-top-login-area .mod-login button:not(.input-password-toggle),
.bl-top-login-area .mod-login input[type="submit"],
.bl-top-login-area .login button:not(.input-password-toggle),
.bl-top-login-area .login input[type="submit"],
.bl-top-login-area button[type="submit"],
.bl-top-login-area input[type="submit"] {
    border-color: transparent !important;
    box-shadow: inset 0 1px rgba(255,255,255,.25), 0 7px 16px rgba(0,0,0,.18) !important;
}

/* v1.0.18 - Profile button in login area. */
.bl-login-logout,
.bl-login-logout * {
    box-sizing: border-box;
}

.bl-login-userdata {
    display: flex !important;
    align-items: center !important;
    gap: .45rem !important;
    margin: 0 !important;
}

.bl-profile-btn,
.bl-logout-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 30px !important;
    padding: .38rem .62rem !important;
    border-radius: 4px !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    letter-spacing: .045em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.bl-top-login-area .bl-login-logout {
    width: auto !important;
}

.bl-top-login-area .bl-login-userdata {
    flex-direction: row !important;
}

.bl-top-login-area .bl-login-greeting {
    color: rgba(255,255,255,.88) !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
    text-shadow: 1px 1px 0 rgba(0,0,0,.65) !important;
}

.bl-top-login-area .bl-profile-btn {
    border: 1px solid rgba(0, 208, 132, .48) !important;
    background: linear-gradient(180deg, rgba(0, 145, 94, .96), rgba(0, 96, 67, .96)) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px rgba(255,255,255,.12), 0 6px 16px rgba(0,0,0,.22) !important;
}

.bl-top-login-area .bl-profile-btn:hover,
.bl-top-login-area .bl-profile-btn:focus-visible {
    background: linear-gradient(180deg, rgba(0, 190, 124, .98), rgba(0, 120, 82, .98)) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.bl-top-login-area .bl-logout-btn {
    min-width: 64px !important;
}

.bl-sidebar-right .bl-login-userdata {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .55rem !important;
    width: 100% !important;
}

.bl-sidebar-right .bl-login-greeting {
    color: #11201a !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
}

.bl-sidebar-right .bl-profile-btn {
    width: 100% !important;
    border: 1px solid rgba(0, 122, 85, .35) !important;
    background: linear-gradient(180deg, #ffffff, #e9f3ee) !important;
    color: #006647 !important;
}

.bl-sidebar-right .bl-profile-btn:hover,
.bl-sidebar-right .bl-profile-btn:focus-visible {
    border-color: rgba(0, 122, 85, .65) !important;
    color: #003d2b !important;
}

@media (max-width: 640px) {
    .bl-top-login-area .bl-login-userdata {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr auto auto !important;
    }
    .bl-top-login-area .bl-login-greeting {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* v1.0.20 - User profile / BEERLEAGUE player profile cleanup. */
.bl-top-login-area .bl-edit-profile-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 92px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: .4rem .72rem !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255, 173, 24, .35) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
    color: var(--bl-logo-orange-bright) !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    letter-spacing: .045em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: 1px 1px 0 rgba(0,0,0,.65) !important;
    white-space: nowrap !important;
    box-shadow: inset 0 1px rgba(255,255,255,.08), 0 6px 16px rgba(0,0,0,.18) !important;
}
.bl-top-login-area .bl-edit-profile-btn:hover,
.bl-top-login-area .bl-edit-profile-btn:focus-visible {
    border-color: rgba(255, 173, 24, .68) !important;
    color: #ffffff !important;
    background: linear-gradient(180deg, rgba(216,137,0,.30), rgba(0,96,67,.22)) !important;
    transform: translateY(-1px);
}
.bl-sidebar-right .bl-edit-profile-btn {
    width: 100% !important;
    border: 1px solid rgba(216,137,0,.35) !important;
    background: linear-gradient(180deg, #fff8e7, #f1ead8) !important;
    color: #745000 !important;
    text-shadow: none !important;
}

/* Joomla user edit/profile forms are much cleaner as compact cards instead of raw fieldsets. */
.com-users-profile__edit,
.profile-edit,
#member-profile,
#users-profile-core,
#users-profile-custom {
    max-width: 1040px;
    margin-inline: auto;
}
.com-users-profile__edit > h1,
.com-users-profile__edit .page-header h1,
.profile-edit > h1,
.profile-edit .page-header h1 {
    margin: 0 0 .85rem;
    font-size: clamp(1.2rem, 1.7vw, 1.65rem);
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: .045em;
}
#member-profile {
    display: grid;
    gap: .8rem;
}
#member-profile fieldset,
.com-users-profile__edit fieldset,
.profile-edit fieldset {
    margin: 0 0 .8rem !important;
    padding: .85rem !important;
    border: 1px solid rgba(0, 208, 132, .22) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,.14)) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
}
#member-profile legend,
.com-users-profile__edit legend,
.profile-edit legend {
    width: auto !important;
    margin: 0 0 .65rem !important;
    padding: .22rem .55rem !important;
    border: 1px solid rgba(0, 208, 132, .28) !important;
    border-radius: 999px !important;
    background: rgba(0, 208, 132, .09) !important;
    color: var(--bl-green-bright) !important;
    font-size: .74rem !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
    letter-spacing: .065em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
}
#member-profile .control-group,
.com-users-profile__edit .control-group,
.profile-edit .control-group {
    display: grid;
    grid-template-columns: minmax(140px, 190px) minmax(0, 1fr);
    gap: .45rem .75rem;
    align-items: center;
    margin: 0 !important;
    padding: .48rem .35rem !important;
    border-bottom: 1px solid rgba(255,255,255,.055);
}
#member-profile .control-group:last-child,
.com-users-profile__edit .control-group:last-child,
.profile-edit .control-group:last-child {
    border-bottom: 0;
}
#member-profile .control-label,
.com-users-profile__edit .control-label,
.profile-edit .control-label {
    margin: 0 !important;
    padding: 0 !important;
}
#member-profile .control-label label,
.com-users-profile__edit .control-label label,
.profile-edit .control-label label,
#member-profile label,
.com-users-profile__edit label,
.profile-edit label {
    margin: 0 !important;
    color: rgba(243,247,245,.88) !important;
    font-size: .82rem !important;
    font-weight: 760 !important;
    line-height: 1.25 !important;
    text-shadow: none !important;
}
#member-profile .controls,
.com-users-profile__edit .controls,
.profile-edit .controls {
    min-width: 0;
    width: 100%;
}
#member-profile input[type="text"],
#member-profile input[type="password"],
#member-profile input[type="email"],
#member-profile input[type="url"],
#member-profile input[type="tel"],
#member-profile select,
#member-profile textarea,
.com-users-profile__edit input[type="text"],
.com-users-profile__edit input[type="password"],
.com-users-profile__edit input[type="email"],
.com-users-profile__edit input[type="url"],
.com-users-profile__edit input[type="tel"],
.com-users-profile__edit select,
.com-users-profile__edit textarea,
.profile-edit input[type="text"],
.profile-edit input[type="password"],
.profile-edit input[type="email"],
.profile-edit input[type="url"],
.profile-edit input[type="tel"],
.profile-edit select,
.profile-edit textarea {
    min-height: 36px !important;
    height: auto !important;
    padding: .48rem .72rem !important;
    border-radius: 10px !important;
    border-color: rgba(0, 208, 132, .22) !important;
    background: rgba(247, 250, 248, .96) !important;
    color: #101714 !important;
    font-size: .88rem !important;
    box-shadow: inset 0 1px rgba(255,255,255,.7) !important;
}
#member-profile textarea,
.com-users-profile__edit textarea,
.profile-edit textarea {
    min-height: 90px !important;
    border-radius: 12px !important;
}
#member-profile .form-text,
#member-profile .text-muted,
#member-profile .small,
.com-users-profile__edit .form-text,
.com-users-profile__edit .text-muted,
.com-users-profile__edit .small,
.profile-edit .form-text,
.profile-edit .text-muted,
.profile-edit .small {
    display: block;
    margin-top: .18rem;
    color: rgba(243,247,245,.66) !important;
    font-size: .72rem !important;
    line-height: 1.25 !important;
}
#member-profile .input-group,
.com-users-profile__edit .input-group,
.profile-edit .input-group {
    display: flex;
    align-items: center;
    gap: .45rem;
}
#member-profile .input-group > input,
.com-users-profile__edit .input-group > input,
.profile-edit .input-group > input {
    min-width: 0;
}
#member-profile .input-password-toggle,
#member-profile .btn-secondary,
.com-users-profile__edit .input-password-toggle,
.com-users-profile__edit .btn-secondary,
.profile-edit .input-password-toggle,
.profile-edit .btn-secondary {
    width: auto !important;
    min-width: auto !important;
    min-height: 34px !important;
    padding: .42rem .7rem !important;
    border-radius: 10px !important;
    font-size: .72rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}
#member-profile input[type="checkbox"],
#member-profile input[type="radio"],
.com-users-profile__edit input[type="checkbox"],
.com-users-profile__edit input[type="radio"],
.profile-edit input[type="checkbox"],
.profile-edit input[type="radio"] {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 !important;
    border-radius: 4px !important;
}
#member-profile .btn-toolbar,
.com-users-profile__edit .btn-toolbar,
.profile-edit .btn-toolbar,
#member-profile .form-actions,
.com-users-profile__edit .form-actions,
.profile-edit .form-actions {
    display: flex;
    gap: .55rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: .4rem;
    padding-top: .7rem;
    border-top: 1px solid rgba(255,255,255,.08);
}

/* Stop Joomla/Choices.js remove buttons from inheriting the large BEERLEAGUE button style. */
.choices__button,
#member-profile .choices__button,
.com-users-profile__edit .choices__button,
.profile-edit .choices__button {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 !important;
    margin: 0 .15rem !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,.28) !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
.choices__button::before {
    content: "×";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
}
.choices__inner,
#member-profile .choices__inner,
.com-users-profile__edit .choices__inner,
.profile-edit .choices__inner {
    min-height: 36px !important;
    border-radius: 10px !important;
    border-color: rgba(0, 208, 132, .22) !important;
    background: rgba(247, 250, 248, .96) !important;
    color: #101714 !important;
}
.choices__list--single,
.choices__item {
    color: #101714;
}

.bl-profile-stats-link-card,
#member-profile .bl-profile-stats-link-card,
.com-users-profile__edit .bl-profile-stats-link-card,
.profile-edit .bl-profile-stats-link-card {
    display: grid;
    gap: .55rem;
    padding: .75rem;
    border: 1px solid rgba(255, 173, 24, .26);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 173, 24, .08), rgba(0, 208, 132, .06));
    color: rgba(243,247,245,.88);
}
.bl-profile-stats-link-card strong {
    color: var(--bl-logo-orange-bright);
    font-size: .86rem;
    text-transform: uppercase;
    letter-spacing: .055em;
}
.bl-profile-stats-link-card p {
    margin: 0;
    color: rgba(243,247,245,.74);
    font-size: .8rem;
}
.bl-profile-stats-link-card .bl-profile-stats-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.bl-profile-stats-link-card .bl-profile-stats-actions a {
    width: auto !important;
    min-height: 32px !important;
    padding: .38rem .7rem !important;
    border-radius: 999px !important;
    font-size: .72rem !important;
}
.bl-player-profile-actions {
    display: grid;
    gap: .45rem;
    min-width: 160px;
}
.bl-player-profile-actions .bl-btn {
    width: 100%;
    min-height: 36px;
    padding: .48rem .75rem;
    font-size: .74rem;
}
.bl-player-profile-actions small {
    color: rgba(243,247,245,.68);
    font-size: .72rem;
    text-align: center;
}

@media (max-width: 760px) {
    #member-profile .control-group,
    .com-users-profile__edit .control-group,
    .profile-edit .control-group {
        grid-template-columns: 1fr;
        padding: .55rem 0 !important;
    }
    #member-profile fieldset,
    .com-users-profile__edit fieldset,
    .profile-edit fieldset {
        padding: .75rem !important;
    }
    .bl-player-profile-actions {
        width: 100%;
    }
}

/* v1.0.21 - tighter Joomla profile form + cleaner multi-factor cards. */
.com-users-profile__edit,
.profile-edit,
#member-profile,
#users-profile-core,
#users-profile-custom {
    max-width: 980px;
}

#member-profile {
    gap: .62rem;
}

#member-profile fieldset,
.com-users-profile__edit fieldset,
.profile-edit fieldset {
    margin-bottom: .62rem !important;
    padding: .68rem .78rem !important;
    border-radius: 14px !important;
}

#member-profile legend,
.com-users-profile__edit legend,
.profile-edit legend {
    margin-bottom: .48rem !important;
    padding: .18rem .5rem !important;
    font-size: .68rem !important;
    letter-spacing: .07em !important;
}

#member-profile .control-group,
.com-users-profile__edit .control-group,
.profile-edit .control-group {
    grid-template-columns: minmax(118px, 158px) minmax(0, 1fr) !important;
    gap: .34rem .68rem !important;
    min-height: 0 !important;
    padding: .34rem .24rem !important;
}

#member-profile .control-label label,
.com-users-profile__edit .control-label label,
.profile-edit .control-label label,
#member-profile label,
.com-users-profile__edit label,
.profile-edit label {
    font-size: .76rem !important;
    line-height: 1.2 !important;
}

#member-profile .controls,
.com-users-profile__edit .controls,
.profile-edit .controls {
    width: min(100%, 640px) !important;
    max-width: 640px !important;
}

#member-profile input[type="text"],
#member-profile input[type="password"],
#member-profile input[type="email"],
#member-profile input[type="url"],
#member-profile input[type="tel"],
#member-profile input[type="number"],
#member-profile select,
#member-profile textarea,
.com-users-profile__edit input[type="text"],
.com-users-profile__edit input[type="password"],
.com-users-profile__edit input[type="email"],
.com-users-profile__edit input[type="url"],
.com-users-profile__edit input[type="tel"],
.com-users-profile__edit input[type="number"],
.com-users-profile__edit select,
.com-users-profile__edit textarea,
.profile-edit input[type="text"],
.profile-edit input[type="password"],
.profile-edit input[type="email"],
.profile-edit input[type="url"],
.profile-edit input[type="tel"],
.profile-edit input[type="number"],
.profile-edit select,
.profile-edit textarea {
    width: min(100%, 640px) !important;
    max-width: 640px !important;
    min-height: 32px !important;
    padding: .34rem .58rem !important;
    border-radius: 8px !important;
    font-size: .82rem !important;
    line-height: 1.2 !important;
}

#member-profile textarea,
.com-users-profile__edit textarea,
.profile-edit textarea {
    min-height: 74px !important;
}

#member-profile .form-text,
#member-profile .text-muted,
#member-profile .small,
.com-users-profile__edit .form-text,
.com-users-profile__edit .text-muted,
.com-users-profile__edit .small,
.profile-edit .form-text,
.profile-edit .text-muted,
.profile-edit .small {
    margin-top: .14rem !important;
    font-size: .66rem !important;
    line-height: 1.22 !important;
}

#member-profile .input-group,
.com-users-profile__edit .input-group,
.profile-edit .input-group {
    width: min(100%, 640px) !important;
    max-width: 640px !important;
    gap: .34rem !important;
}

#member-profile .input-group > input,
.com-users-profile__edit .input-group > input,
.profile-edit .input-group > input {
    flex: 1 1 auto !important;
    max-width: none !important;
}

#member-profile .input-password-toggle,
#member-profile .btn-secondary,
.com-users-profile__edit .input-password-toggle,
.com-users-profile__edit .btn-secondary,
.profile-edit .input-password-toggle,
.profile-edit .btn-secondary {
    min-height: 32px !important;
    padding: .34rem .62rem !important;
    border-radius: 8px !important;
    font-size: .66rem !important;
}

#member-profile .choices,
.com-users-profile__edit .choices,
.profile-edit .choices {
    width: min(100%, 640px) !important;
    max-width: 640px !important;
    margin-bottom: 0 !important;
}

#member-profile .choices__inner,
.com-users-profile__edit .choices__inner,
.profile-edit .choices__inner {
    min-height: 32px !important;
    padding: .16rem .42rem !important;
    border-radius: 8px !important;
    font-size: .8rem !important;
}

#member-profile .choices__input,
.com-users-profile__edit .choices__input,
.profile-edit .choices__input {
    min-height: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: .12rem .25rem !important;
    font-size: .76rem !important;
}

#member-profile .choices__list--multiple .choices__item,
.com-users-profile__edit .choices__list--multiple .choices__item,
.profile-edit .choices__list--multiple .choices__item {
    margin: .12rem .18rem .12rem 0 !important;
    padding: .24rem .44rem !important;
    border-radius: 999px !important;
    font-size: .68rem !important;
    line-height: 1 !important;
}

/* API token rows should wrap instead of forcing huge one-line fields. */
#member-profile input[readonly],
.com-users-profile__edit input[readonly],
.profile-edit input[readonly] {
    font-size: .74rem !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
}

#member-profile .control-group:has(input[readonly]) .controls,
.com-users-profile__edit .control-group:has(input[readonly]) .controls,
.profile-edit .control-group:has(input[readonly]) .controls {
    display: flex !important;
    align-items: center !important;
    gap: .36rem !important;
    flex-wrap: wrap !important;
    max-width: 760px !important;
    width: min(100%, 760px) !important;
}

#member-profile .control-group:has(input[readonly]) input[readonly],
.com-users-profile__edit .control-group:has(input[readonly]) input[readonly],
.profile-edit .control-group:has(input[readonly]) input[readonly] {
    flex: 1 1 430px !important;
    max-width: 600px !important;
}

/* Make Joomla's multi-factor setup look like compact BEERLEAGUE cards instead of oversized blocks. */
.com-users-methods-list,
.com-users-profile__edit .com-users-methods-list,
.profile-edit .com-users-methods-list,
#member-profile .com-users-methods-list {
    display: grid !important;
    gap: .5rem !important;
    margin: .42rem 0 0 !important;
}

.com-users-methods-list-method,
.com-users-profile__edit .com-users-methods-list-method,
.profile-edit .com-users-methods-list-method,
#member-profile .com-users-methods-list-method,
.com-users-profile__edit .mfa-method,
.profile-edit .mfa-method,
#member-profile .mfa-method {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: .68rem !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: .58rem .68rem !important;
    border: 1px solid rgba(0, 208, 132, .20) !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, rgba(0, 208, 132, .055), rgba(0,0,0,.10)) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
}

.com-users-methods-list-method img,
.com-users-methods-list-method svg,
.com-users-profile__edit .mfa-method img,
.profile-edit .mfa-method img,
#member-profile .mfa-method img {
    display: block !important;
    width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    max-height: 42px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    opacity: .9 !important;
}

.com-users-methods-list-method h2,
.com-users-methods-list-method h3,
.com-users-methods-list-method h4,
.com-users-methods-list-method .com-users-methods-list-method-title,
.com-users-profile__edit .mfa-method h2,
.com-users-profile__edit .mfa-method h3,
.profile-edit .mfa-method h2,
.profile-edit .mfa-method h3,
#member-profile .mfa-method h2,
#member-profile .mfa-method h3 {
    margin: 0 0 .12rem !important;
    color: #fff !important;
    font-size: .98rem !important;
    line-height: 1.12 !important;
    letter-spacing: .015em !important;
    text-shadow: none !important;
}

.com-users-methods-list-method p,
.com-users-methods-list-method .com-users-methods-list-method-description,
.com-users-profile__edit .mfa-method p,
.profile-edit .mfa-method p,
#member-profile .mfa-method p {
    margin: 0 !important;
    color: rgba(243,247,245,.70) !important;
    font-size: .72rem !important;
    line-height: 1.28 !important;
}

.com-users-methods-list-method .btn,
.com-users-profile__edit .mfa-method .btn,
.profile-edit .mfa-method .btn,
#member-profile .mfa-method .btn {
    width: auto !important;
    min-width: 0 !important;
    min-height: 30px !important;
    padding: .34rem .58rem !important;
    border-radius: 8px !important;
    font-size: .66rem !important;
    white-space: nowrap !important;
}

.com-users-profile__edit .alert,
.profile-edit .alert,
#member-profile .alert {
    margin: .3rem 0 .5rem !important;
    padding: .52rem .68rem !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 173, 24, .25) !important;
    background: rgba(255, 173, 24, .08) !important;
    color: rgba(243,247,245,.88) !important;
    font-size: .8rem !important;
}

@media (max-width: 760px) {
    #member-profile .control-group,
    .com-users-profile__edit .control-group,
    .profile-edit .control-group {
        grid-template-columns: 1fr !important;
        gap: .24rem !important;
        padding: .42rem 0 !important;
    }
    #member-profile .controls,
    .com-users-profile__edit .controls,
    .profile-edit .controls,
    #member-profile input[type="text"],
    #member-profile input[type="password"],
    #member-profile input[type="email"],
    #member-profile select,
    .com-users-profile__edit input[type="text"],
    .com-users-profile__edit input[type="password"],
    .com-users-profile__edit input[type="email"],
    .com-users-profile__edit select,
    .profile-edit input[type="text"],
    .profile-edit input[type="password"],
    .profile-edit input[type="email"],
    .profile-edit select,
    #member-profile .choices,
    .com-users-profile__edit .choices,
    .profile-edit .choices {
        width: 100% !important;
        max-width: 100% !important;
    }
    .com-users-methods-list-method,
    .com-users-profile__edit .com-users-methods-list-method,
    .profile-edit .com-users-methods-list-method,
    #member-profile .com-users-methods-list-method,
    .com-users-profile__edit .mfa-method,
    .profile-edit .mfa-method,
    #member-profile .mfa-method {
        grid-template-columns: 42px minmax(0, 1fr) !important;
    }
    .com-users-methods-list-method .btn,
    .com-users-profile__edit .mfa-method .btn,
    .profile-edit .mfa-method .btn,
    #member-profile .mfa-method .btn {
        grid-column: 2;
        justify-self: start;
        margin-top: .18rem !important;
    }
}

/* v1.0.22 - compact / sleek profile edit form pass.
   This intentionally overrides earlier profile form sizing with smaller fields and narrower controls. */
.com-users-profile__edit,
.profile-edit,
#member-profile {
    max-width: 820px !important;
}

#member-profile {
    gap: .5rem !important;
}

#member-profile fieldset,
.com-users-profile__edit fieldset,
.profile-edit fieldset {
    max-width: 820px !important;
    margin-bottom: .5rem !important;
    padding: .58rem .68rem !important;
    border-radius: 12px !important;
}

#member-profile legend,
.com-users-profile__edit legend,
.profile-edit legend {
    margin-bottom: .36rem !important;
    padding: .15rem .46rem !important;
    font-size: .64rem !important;
    line-height: 1.1 !important;
}

#member-profile .control-group,
.com-users-profile__edit .control-group,
.profile-edit .control-group {
    grid-template-columns: 145px minmax(0, 460px) !important;
    gap: .28rem .58rem !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: .28rem .12rem !important;
}

#member-profile .control-label,
.com-users-profile__edit .control-label,
.profile-edit .control-label {
    align-self: center !important;
}

#member-profile .control-label label,
.com-users-profile__edit .control-label label,
.profile-edit .control-label label,
#member-profile label,
.com-users-profile__edit label,
.profile-edit label {
    font-size: .72rem !important;
    line-height: 1.15 !important;
    letter-spacing: .01em !important;
}

#member-profile .controls,
.com-users-profile__edit .controls,
.profile-edit .controls {
    width: min(100%, 460px) !important;
    max-width: 460px !important;
}

#member-profile input[type="text"],
#member-profile input[type="password"],
#member-profile input[type="email"],
#member-profile input[type="url"],
#member-profile input[type="tel"],
#member-profile input[type="number"],
#member-profile input.form-control,
#member-profile select,
#member-profile select.form-select,
#member-profile select.custom-select,
#member-profile .inputbox,
.com-users-profile__edit input[type="text"],
.com-users-profile__edit input[type="password"],
.com-users-profile__edit input[type="email"],
.com-users-profile__edit input[type="url"],
.com-users-profile__edit input[type="tel"],
.com-users-profile__edit input[type="number"],
.com-users-profile__edit input.form-control,
.com-users-profile__edit select,
.com-users-profile__edit select.form-select,
.com-users-profile__edit select.custom-select,
.com-users-profile__edit .inputbox,
.profile-edit input[type="text"],
.profile-edit input[type="password"],
.profile-edit input[type="email"],
.profile-edit input[type="url"],
.profile-edit input[type="tel"],
.profile-edit input[type="number"],
.profile-edit input.form-control,
.profile-edit select,
.profile-edit select.form-select,
.profile-edit select.custom-select,
.profile-edit .inputbox {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 460px !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: .22rem .48rem !important;
    border-radius: 7px !important;
    font-size: .76rem !important;
    line-height: 1.12 !important;
}

#member-profile textarea,
.com-users-profile__edit textarea,
.profile-edit textarea {
    width: 100% !important;
    max-width: 460px !important;
    min-height: 62px !important;
    height: auto !important;
    padding: .34rem .48rem !important;
    border-radius: 8px !important;
    font-size: .76rem !important;
}

#member-profile .form-text,
#member-profile .text-muted,
#member-profile .small,
.com-users-profile__edit .form-text,
.com-users-profile__edit .text-muted,
.com-users-profile__edit .small,
.profile-edit .form-text,
.profile-edit .text-muted,
.profile-edit .small {
    margin-top: .1rem !important;
    font-size: .62rem !important;
    line-height: 1.18 !important;
}

#member-profile .input-group,
.com-users-profile__edit .input-group,
.profile-edit .input-group {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    gap: .32rem !important;
}

#member-profile .input-group > input,
.com-users-profile__edit .input-group > input,
.profile-edit .input-group > input {
    width: 100% !important;
    max-width: none !important;
}

#member-profile .input-password-toggle,
#member-profile .btn-secondary,
.com-users-profile__edit .input-password-toggle,
.com-users-profile__edit .btn-secondary,
.profile-edit .input-password-toggle,
.profile-edit .btn-secondary {
    min-height: 28px !important;
    height: 28px !important;
    padding: .22rem .5rem !important;
    border-radius: 7px !important;
    font-size: .62rem !important;
    letter-spacing: .04em !important;
    line-height: 1 !important;
}

/* Compact the Joomla Choices.js selects, especially Basic Settings and Events to Email. */
#member-profile .choices,
.com-users-profile__edit .choices,
.profile-edit .choices {
    width: min(100%, 460px) !important;
    max-width: 460px !important;
    min-height: 28px !important;
    margin: 0 !important;
}

#member-profile .choices__inner,
.com-users-profile__edit .choices__inner,
.profile-edit .choices__inner {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 28px !important;
    height: auto !important;
    padding: .12rem .36rem !important;
    border-radius: 7px !important;
    font-size: .74rem !important;
    line-height: 1.1 !important;
}

#member-profile .choices__list,
.com-users-profile__edit .choices__list,
.profile-edit .choices__list {
    line-height: 1.1 !important;
}

#member-profile .choices__list--single,
.com-users-profile__edit .choices__list--single,
.profile-edit .choices__list--single {
    padding: 0 1.15rem 0 0 !important;
}

#member-profile .choices__item,
.com-users-profile__edit .choices__item,
.profile-edit .choices__item {
    font-size: .74rem !important;
    line-height: 1.1 !important;
}

#member-profile .choices__input,
.com-users-profile__edit .choices__input,
.profile-edit .choices__input {
    width: auto !important;
    min-height: 22px !important;
    height: 22px !important;
    padding: .08rem .22rem !important;
    font-size: .72rem !important;
}

#member-profile .choices__list--multiple .choices__item,
.com-users-profile__edit .choices__list--multiple .choices__item,
.profile-edit .choices__list--multiple .choices__item {
    min-height: 22px !important;
    margin: .08rem .12rem .08rem 0 !important;
    padding: .16rem .36rem !important;
    border-radius: 999px !important;
    font-size: .62rem !important;
    line-height: 1 !important;
}

#member-profile .choices__button,
.com-users-profile__edit .choices__button,
.profile-edit .choices__button {
    width: 14px !important;
    min-width: 14px !important;
    height: 14px !important;
    min-height: 14px !important;
    margin-left: .18rem !important;
}

#member-profile .choices__button::before,
.com-users-profile__edit .choices__button::before,
.profile-edit .choices__button::before {
    width: 14px !important;
    height: 14px !important;
    font-size: 10px !important;
}

/* Read-only/token rows get a little more room, but still remain compact. */
#member-profile .control-group:has(input[readonly]) .controls,
.com-users-profile__edit .control-group:has(input[readonly]) .controls,
.profile-edit .control-group:has(input[readonly]) .controls {
    width: min(100%, 600px) !important;
    max-width: 600px !important;
}

#member-profile .control-group:has(input[readonly]) input[readonly],
.com-users-profile__edit .control-group:has(input[readonly]) input[readonly],
.profile-edit .control-group:has(input[readonly]) input[readonly] {
    max-width: 500px !important;
    min-height: 28px !important;
    height: 28px !important;
    font-size: .68rem !important;
}

/* Compact MFA / passkey setup into tighter cards. */
#member-profile .com-users-methods-list,
.com-users-profile__edit .com-users-methods-list,
.profile-edit .com-users-methods-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: .46rem !important;
    max-width: 720px !important;
    margin-top: .34rem !important;
}

#member-profile .com-users-methods-list > *,
.com-users-profile__edit .com-users-methods-list > *,
.profile-edit .com-users-methods-list > *,
#member-profile .com-users-methods-list-method,
.com-users-profile__edit .com-users-methods-list-method,
.profile-edit .com-users-methods-list-method,
#member-profile .mfa-method,
.com-users-profile__edit .mfa-method,
.profile-edit .mfa-method {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: .38rem .52rem !important;
    min-height: 0 !important;
    padding: .46rem .5rem !important;
    border-radius: 10px !important;
}

#member-profile .com-users-methods-list img,
#member-profile .com-users-methods-list svg,
.com-users-profile__edit .com-users-methods-list img,
.com-users-profile__edit .com-users-methods-list svg,
.profile-edit .com-users-methods-list img,
.profile-edit .com-users-methods-list svg {
    width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
}

#member-profile .com-users-methods-list h2,
#member-profile .com-users-methods-list h3,
#member-profile .com-users-methods-list h4,
.com-users-profile__edit .com-users-methods-list h2,
.com-users-profile__edit .com-users-methods-list h3,
.com-users-profile__edit .com-users-methods-list h4,
.profile-edit .com-users-methods-list h2,
.profile-edit .com-users-methods-list h3,
.profile-edit .com-users-methods-list h4 {
    margin: 0 0 .08rem !important;
    font-size: .86rem !important;
    line-height: 1.08 !important;
}

#member-profile .com-users-methods-list p,
.com-users-profile__edit .com-users-methods-list p,
.profile-edit .com-users-methods-list p {
    margin: 0 !important;
    font-size: .65rem !important;
    line-height: 1.18 !important;
}

#member-profile .com-users-methods-list .btn,
.com-users-profile__edit .com-users-methods-list .btn,
.profile-edit .com-users-methods-list .btn,
#member-profile .mfa-method .btn,
.com-users-profile__edit .mfa-method .btn,
.profile-edit .mfa-method .btn {
    grid-column: 2 !important;
    justify-self: start !important;
    min-height: 26px !important;
    height: 26px !important;
    padding: .2rem .44rem !important;
    border-radius: 7px !important;
    font-size: .6rem !important;
}

#member-profile .btn-toolbar,
.com-users-profile__edit .btn-toolbar,
.profile-edit .btn-toolbar,
#member-profile .form-actions,
.com-users-profile__edit .form-actions,
.profile-edit .form-actions {
    max-width: 820px !important;
    padding-top: .5rem !important;
}

@media (max-width: 760px) {
    #member-profile,
    .com-users-profile__edit,
    .profile-edit {
        max-width: 100% !important;
    }

    #member-profile .control-group,
    .com-users-profile__edit .control-group,
    .profile-edit .control-group {
        grid-template-columns: 1fr !important;
        padding: .36rem 0 !important;
    }

    #member-profile .controls,
    .com-users-profile__edit .controls,
    .profile-edit .controls,
    #member-profile input[type="text"],
    #member-profile input[type="password"],
    #member-profile input[type="email"],
    #member-profile input.form-control,
    #member-profile select,
    #member-profile .choices,
    .com-users-profile__edit input[type="text"],
    .com-users-profile__edit input[type="password"],
    .com-users-profile__edit input[type="email"],
    .com-users-profile__edit input.form-control,
    .com-users-profile__edit select,
    .com-users-profile__edit .choices,
    .profile-edit input[type="text"],
    .profile-edit input[type="password"],
    .profile-edit input[type="email"],
    .profile-edit input.form-control,
    .profile-edit select,
    .profile-edit .choices {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* v1.0.23 - profile edit dashboard layout: two-column cards, smaller sleek controls, Steam identity strip. */
.bl-user-profile-edit,
.com-users-profile__edit.bl-user-profile-edit,
.profile-edit.bl-user-profile-edit {
    max-width: 1160px !important;
    width: 100% !important;
    margin-inline: auto !important;
}

#member-profile.bl-user-profile-form {
    display: block !important;
    max-width: 1160px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

#member-profile.bl-user-profile-form .bl-profile-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(330px, 1fr)) !important;
    align-items: start !important;
    gap: .72rem !important;
    width: 100% !important;
}

#member-profile.bl-user-profile-form .bl-profile-card {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: .62rem .72rem .68rem !important;
    border: 1px solid rgba(0, 208, 132, .24) !important;
    border-radius: 13px !important;
    background: linear-gradient(180deg, rgba(0, 38, 25, .78), rgba(0, 18, 13, .70)) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.035), 0 10px 22px rgba(0,0,0,.14) !important;
}

#member-profile.bl-user-profile-form .bl-profile-card legend {
    width: auto !important;
    margin: -.18rem 0 .52rem !important;
    padding: .18rem .52rem !important;
    border: 1px solid rgba(0, 208, 132, .36) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(0, 150, 99, .32), rgba(0, 95, 66, .28)) !important;
    color: var(--bl-green-bright) !important;
    font-size: .62rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: .065em !important;
    text-transform: uppercase !important;
}

#member-profile.bl-user-profile-form .bl-profile-fieldset-desc {
    margin: -.14rem 0 .44rem !important;
    color: rgba(243,247,245,.72) !important;
    font-size: .72rem !important;
    line-height: 1.32 !important;
}

#member-profile.bl-user-profile-form .bl-profile-steam-strip {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: .55rem !important;
    margin: -.12rem 0 .5rem !important;
    padding: .5rem !important;
    border: 1px solid rgba(255, 173, 24, .22) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(255, 173, 24, .095), rgba(0, 208, 132, .075)) !important;
}

#member-profile.bl-user-profile-form .bl-profile-steam-avatar {
    display: grid !important;
    place-items: center !important;
    width: 46px !important;
    height: 46px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 173, 24, .48) !important;
    border-radius: 10px !important;
    background: rgba(0,0,0,.28) !important;
    color: var(--bl-logo-orange-bright) !important;
    font-size: 1.15rem !important;
    font-weight: 950 !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.22) !important;
}

#member-profile.bl-user-profile-form .bl-profile-steam-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

#member-profile.bl-user-profile-form .bl-profile-steam-copy {
    display: grid !important;
    min-width: 0 !important;
    gap: .08rem !important;
}

#member-profile.bl-user-profile-form .bl-profile-steam-copy strong {
    overflow: hidden !important;
    color: #fff !important;
    font-size: .82rem !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#member-profile.bl-user-profile-form .bl-profile-steam-copy span {
    overflow: hidden !important;
    color: rgba(243,247,245,.66) !important;
    font-size: .64rem !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#member-profile.bl-user-profile-form .bl-profile-steam-actions {
    display: flex !important;
    align-items: center !important;
    gap: .32rem !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
}

#member-profile.bl-user-profile-form .bl-profile-mini-btn,
#member-profile.bl-user-profile-form .bl-profile-steam-actions .btn {
    width: auto !important;
    min-height: 24px !important;
    height: 24px !important;
    padding: .2rem .43rem !important;
    border-radius: 999px !important;
    font-size: .58rem !important;
    line-height: 1 !important;
    letter-spacing: .045em !important;
}

#member-profile.bl-user-profile-form .bl-field-row,
#member-profile.bl-user-profile-form .control-group {
    display: grid !important;
    grid-template-columns: 116px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: .22rem .5rem !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: .25rem 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.045) !important;
}

#member-profile.bl-user-profile-form .bl-field-row:last-child,
#member-profile.bl-user-profile-form .control-group:last-child {
    border-bottom: 0 !important;
}

#member-profile.bl-user-profile-form .bl-field-full {
    grid-template-columns: 1fr !important;
}

#member-profile.bl-user-profile-form .control-label,
#member-profile.bl-user-profile-form .control-label label,
#member-profile.bl-user-profile-form label {
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(243,247,245,.86) !important;
    font-size: .66rem !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    letter-spacing: .005em !important;
    text-shadow: none !important;
}

#member-profile.bl-user-profile-form .controls {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

#member-profile.bl-user-profile-form input[type="text"],
#member-profile.bl-user-profile-form input[type="password"],
#member-profile.bl-user-profile-form input[type="email"],
#member-profile.bl-user-profile-form input[type="url"],
#member-profile.bl-user-profile-form input[type="tel"],
#member-profile.bl-user-profile-form input[type="number"],
#member-profile.bl-user-profile-form input.form-control,
#member-profile.bl-user-profile-form select,
#member-profile.bl-user-profile-form select.form-select,
#member-profile.bl-user-profile-form select.custom-select,
#member-profile.bl-user-profile-form .inputbox,
#member-profile.bl-user-profile-form textarea {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 24px !important;
    height: 24px !important;
    padding: .16rem .42rem !important;
    border: 1px solid rgba(0, 208, 132, .20) !important;
    border-radius: 6px !important;
    background: rgba(248, 251, 249, .96) !important;
    color: #101714 !important;
    font-size: .7rem !important;
    line-height: 1.08 !important;
    box-shadow: inset 0 1px rgba(255,255,255,.7) !important;
}

#member-profile.bl-user-profile-form textarea {
    min-height: 56px !important;
    height: auto !important;
    padding: .32rem .42rem !important;
}

#member-profile.bl-user-profile-form .input-group {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    gap: .28rem !important;
}

#member-profile.bl-user-profile-form .input-group > input {
    width: 100% !important;
    max-width: none !important;
}

#member-profile.bl-user-profile-form .input-password-toggle,
#member-profile.bl-user-profile-form .btn-secondary,
#member-profile.bl-user-profile-form button.btn,
#member-profile.bl-user-profile-form .btn:not(.bl-profile-mini-btn) {
    width: auto !important;
    min-width: 0 !important;
    min-height: 24px !important;
    height: 24px !important;
    padding: .18rem .44rem !important;
    border-radius: 6px !important;
    font-size: .58rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

#member-profile.bl-user-profile-form .form-text,
#member-profile.bl-user-profile-form .text-muted,
#member-profile.bl-user-profile-form .small,
#member-profile.bl-user-profile-form .form-control-feedback,
#member-profile.bl-user-profile-form .form-text span {
    display: block !important;
    margin-top: .08rem !important;
    color: rgba(243,247,245,.60) !important;
    font-size: .56rem !important;
    line-height: 1.15 !important;
}

#member-profile.bl-user-profile-form .choices {
    width: 100% !important;
    max-width: none !important;
    min-height: 24px !important;
    margin: 0 !important;
}

#member-profile.bl-user-profile-form .choices__inner {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 24px !important;
    height: auto !important;
    padding: .09rem .32rem !important;
    border: 1px solid rgba(0, 208, 132, .20) !important;
    border-radius: 6px !important;
    background: rgba(248, 251, 249, .96) !important;
    color: #101714 !important;
    font-size: .68rem !important;
    line-height: 1.05 !important;
}

#member-profile.bl-user-profile-form .choices__list--single {
    padding: 0 1rem 0 0 !important;
}

#member-profile.bl-user-profile-form .choices__item,
#member-profile.bl-user-profile-form .choices__input {
    font-size: .68rem !important;
    line-height: 1.05 !important;
}

#member-profile.bl-user-profile-form .choices__input {
    min-height: 19px !important;
    height: 19px !important;
    padding: .05rem .18rem !important;
}

#member-profile.bl-user-profile-form .choices__list--multiple .choices__item {
    min-height: 19px !important;
    margin: .05rem .1rem .05rem 0 !important;
    padding: .12rem .28rem !important;
    border-radius: 999px !important;
    font-size: .56rem !important;
    line-height: 1 !important;
}

#member-profile.bl-user-profile-form .choices__button,
#member-profile.bl-user-profile-form .choices__button::before {
    width: 13px !important;
    min-width: 13px !important;
    height: 13px !important;
    min-height: 13px !important;
    font-size: 9px !important;
}

#member-profile.bl-user-profile-form input[type="checkbox"],
#member-profile.bl-user-profile-form input[type="radio"] {
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    padding: 0 !important;
}

#member-profile.bl-user-profile-form .bl-profile-card-beerleague-stats .bl-profile-stats-link-card {
    padding: .52rem !important;
    border-radius: 11px !important;
    gap: .32rem !important;
}

#member-profile.bl-user-profile-form .bl-profile-card-beerleague-stats .bl-profile-stats-link-card strong {
    font-size: .68rem !important;
}

#member-profile.bl-user-profile-form .bl-profile-card-beerleague-stats .bl-profile-stats-link-card p {
    font-size: .64rem !important;
    line-height: 1.25 !important;
}

#member-profile.bl-user-profile-form .bl-profile-card-beerleague-stats .bl-profile-stats-actions a {
    min-height: 23px !important;
    height: 23px !important;
    padding: .18rem .42rem !important;
    font-size: .56rem !important;
}

#member-profile.bl-user-profile-form .bl-profile-card-joomla-api-token .bl-field-row,
#member-profile.bl-user-profile-form .bl-profile-card-multi-factor-authentication .bl-field-row,
#member-profile.bl-user-profile-form .bl-profile-card-multifactorauth .bl-field-row,
#member-profile.bl-user-profile-form .bl-profile-card-com-users-methods .bl-field-row {
    grid-template-columns: 1fr !important;
    align-items: start !important;
}

#member-profile.bl-user-profile-form .bl-profile-card-joomla-api-token .control-label,
#member-profile.bl-user-profile-form .bl-profile-card-multi-factor-authentication .control-label,
#member-profile.bl-user-profile-form .bl-profile-card-multifactorauth .control-label,
#member-profile.bl-user-profile-form .bl-profile-card-com-users-methods .control-label {
    margin-bottom: .16rem !important;
}

#member-profile.bl-user-profile-form .com-users-methods-list,
#member-profile.bl-user-profile-form .mfa-methods-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)) !important;
    gap: .4rem !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: .28rem !important;
}

#member-profile.bl-user-profile-form .com-users-methods-list > *,
#member-profile.bl-user-profile-form .com-users-methods-list-method,
#member-profile.bl-user-profile-form .mfa-method {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: .28rem .42rem !important;
    min-height: 0 !important;
    padding: .38rem .42rem !important;
    border-radius: 10px !important;
    background: rgba(0, 208, 132, .055) !important;
}

#member-profile.bl-user-profile-form .com-users-methods-list img,
#member-profile.bl-user-profile-form .com-users-methods-list svg,
#member-profile.bl-user-profile-form .mfa-method img,
#member-profile.bl-user-profile-form .mfa-method svg {
    width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    max-height: 28px !important;
    object-fit: contain !important;
}

#member-profile.bl-user-profile-form .com-users-methods-list h2,
#member-profile.bl-user-profile-form .com-users-methods-list h3,
#member-profile.bl-user-profile-form .com-users-methods-list h4,
#member-profile.bl-user-profile-form .mfa-method h2,
#member-profile.bl-user-profile-form .mfa-method h3,
#member-profile.bl-user-profile-form .mfa-method h4 {
    margin: 0 0 .05rem !important;
    color: #fff !important;
    font-size: .78rem !important;
    line-height: 1.08 !important;
}

#member-profile.bl-user-profile-form .com-users-methods-list p,
#member-profile.bl-user-profile-form .mfa-method p {
    margin: 0 !important;
    color: rgba(243,247,245,.66) !important;
    font-size: .58rem !important;
    line-height: 1.16 !important;
}

#member-profile.bl-user-profile-form .com-users-methods-list .btn,
#member-profile.bl-user-profile-form .mfa-method .btn {
    grid-column: 2 !important;
    justify-self: start !important;
    min-height: 22px !important;
    height: 22px !important;
    padding: .15rem .36rem !important;
    border-radius: 6px !important;
    font-size: .52rem !important;
}

#member-profile.bl-user-profile-form .bl-profile-actions-bar {
    display: flex !important;
    justify-content: flex-end !important;
    gap: .45rem !important;
    margin-top: .72rem !important;
    padding-top: .62rem !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
}

#member-profile.bl-user-profile-form .bl-profile-actions-bar .btn {
    min-height: 28px !important;
    height: 28px !important;
    padding: .22rem .62rem !important;
    border-radius: 7px !important;
    font-size: .64rem !important;
}

@media (max-width: 980px) {
    #member-profile.bl-user-profile-form .bl-profile-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 620px) {
    #member-profile.bl-user-profile-form .bl-profile-card {
        padding: .58rem !important;
    }
    #member-profile.bl-user-profile-form .bl-field-row,
    #member-profile.bl-user-profile-form .control-group {
        grid-template-columns: 1fr !important;
        gap: .12rem !important;
        padding: .3rem 0 !important;
    }
    #member-profile.bl-user-profile-form .bl-profile-steam-strip {
        grid-template-columns: 40px minmax(0, 1fr) !important;
    }
    #member-profile.bl-user-profile-form .bl-profile-steam-actions {
        grid-column: 1 / -1 !important;
        justify-content: flex-start !important;
    }
}


/* v1.0.24 - polish Joomla profile toggles and Choices.js remove buttons.
   Keeps checkboxes/switches small and prevents Choices remove controls from inheriting big button styles. */
#member-profile.bl-user-profile-form .choices,
.com-users-profile__edit .choices,
.profile-edit .choices {
    overflow: visible !important;
}

#member-profile.bl-user-profile-form .choices__inner,
.com-users-profile__edit .choices__inner,
.profile-edit .choices__inner {
    align-items: center !important;
    min-height: 26px !important;
    padding: .1rem .32rem !important;
    overflow: hidden !important;
}

#member-profile.bl-user-profile-form .choices__list--multiple,
.com-users-profile__edit .choices__list--multiple,
.profile-edit .choices__list--multiple {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: .12rem !important;
    width: 100% !important;
    min-height: 20px !important;
    padding: 0 !important;
}

#member-profile.bl-user-profile-form .choices__list--multiple .choices__item,
.com-users-profile__edit .choices__list--multiple .choices__item,
.profile-edit .choices__list--multiple .choices__item,
#member-profile.bl-user-profile-form .choices__item--selectable,
.com-users-profile__edit .choices__item--selectable,
.profile-edit .choices__item--selectable {
    display: inline-flex !important;
    align-items: center !important;
    gap: .16rem !important;
    max-width: 100% !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: .12rem .22rem !important;
    border-radius: 999px !important;
    font-size: .58rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

#member-profile.bl-user-profile-form .choices__input,
.com-users-profile__edit .choices__input,
.profile-edit .choices__input {
    flex: 1 1 120px !important;
    width: auto !important;
    min-width: 118px !important;
    max-width: 100% !important;
    min-height: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: .04rem .18rem !important;
    font-size: .64rem !important;
    line-height: 1 !important;
}

/* Joomla names this button choices__button_joomla, so match by substring and data-button too. */
#member-profile.bl-user-profile-form .choices [data-button],
#member-profile.bl-user-profile-form [class*="choices__button"],
.com-users-profile__edit .choices [data-button],
.com-users-profile__edit [class*="choices__button"],
.profile-edit .choices [data-button],
.profile-edit [class*="choices__button"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 13px !important;
    width: 13px !important;
    min-width: 13px !important;
    max-width: 13px !important;
    height: 13px !important;
    min-height: 13px !important;
    max-height: 13px !important;
    margin: 0 0 0 .12rem !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(0, 25, 18, .50) !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-indent: -9999px !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    box-shadow: inset 0 1px rgba(255,255,255,.16) !important;
}

#member-profile.bl-user-profile-form .choices [data-button]::after,
#member-profile.bl-user-profile-form [class*="choices__button"]::after,
.com-users-profile__edit .choices [data-button]::after,
.com-users-profile__edit [class*="choices__button"]::after,
.profile-edit .choices [data-button]::after,
.profile-edit [class*="choices__button"]::after {
    content: "×" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 13px !important;
    height: 13px !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-indent: 0 !important;
}

#member-profile.bl-user-profile-form .choices [data-button]:hover,
#member-profile.bl-user-profile-form [class*="choices__button"]:hover,
.com-users-profile__edit .choices [data-button]:hover,
.com-users-profile__edit [class*="choices__button"]:hover,
.profile-edit .choices [data-button]:hover,
.profile-edit [class*="choices__button"]:hover {
    background: rgba(194, 42, 42, .78) !important;
}

/* Sleek boolean controls: checkboxes, radios, Joomla Yes/No button groups, and switchers. */
#member-profile.bl-user-profile-form input[type="checkbox"],
#member-profile.bl-user-profile-form input[type="radio"],
.com-users-profile__edit input[type="checkbox"],
.com-users-profile__edit input[type="radio"],
.profile-edit input[type="checkbox"],
.profile-edit input[type="radio"] {
    appearance: auto !important;
    accent-color: #008e61 !important;
    width: 13px !important;
    min-width: 13px !important;
    max-width: 13px !important;
    height: 13px !important;
    min-height: 13px !important;
    max-height: 13px !important;
    margin: 0 .28rem 0 0 !important;
    padding: 0 !important;
    border-radius: 3px !important;
    vertical-align: middle !important;
    box-shadow: none !important;
}

#member-profile.bl-user-profile-form .switcher,
#member-profile.bl-user-profile-form fieldset.radio,
#member-profile.bl-user-profile-form .radio.btn-group,
#member-profile.bl-user-profile-form .btn-group-yesno,
#member-profile.bl-user-profile-form .joomla-form-switcher,
.com-users-profile__edit .switcher,
.com-users-profile__edit fieldset.radio,
.com-users-profile__edit .radio.btn-group,
.com-users-profile__edit .btn-group-yesno,
.profile-edit .switcher,
.profile-edit fieldset.radio,
.profile-edit .radio.btn-group,
.profile-edit .btn-group-yesno {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 2px !important;
    border: 1px solid rgba(0, 208, 132, .18) !important;
    border-radius: 999px !important;
    background: rgba(0, 16, 12, .42) !important;
    box-shadow: inset 0 1px 5px rgba(0,0,0,.28) !important;
}

#member-profile.bl-user-profile-form .switcher input[type="radio"],
#member-profile.bl-user-profile-form .switcher input[type="checkbox"],
#member-profile.bl-user-profile-form fieldset.radio input[type="radio"],
#member-profile.bl-user-profile-form .radio.btn-group input[type="radio"],
#member-profile.bl-user-profile-form .btn-group-yesno input[type="radio"],
.com-users-profile__edit .switcher input[type="radio"],
.com-users-profile__edit .switcher input[type="checkbox"],
.com-users-profile__edit fieldset.radio input[type="radio"],
.com-users-profile__edit .radio.btn-group input[type="radio"],
.com-users-profile__edit .btn-group-yesno input[type="radio"],
.profile-edit .switcher input[type="radio"],
.profile-edit .switcher input[type="checkbox"],
.profile-edit fieldset.radio input[type="radio"],
.profile-edit .radio.btn-group input[type="radio"],
.profile-edit .btn-group-yesno input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 1px !important;
    min-height: 1px !important;
    margin: 0 !important;
}

#member-profile.bl-user-profile-form .switcher label,
#member-profile.bl-user-profile-form fieldset.radio label,
#member-profile.bl-user-profile-form .radio.btn-group label,
#member-profile.bl-user-profile-form .btn-group-yesno label,
#member-profile.bl-user-profile-form .btn-group-yesno .btn,
.com-users-profile__edit .switcher label,
.com-users-profile__edit fieldset.radio label,
.com-users-profile__edit .radio.btn-group label,
.com-users-profile__edit .btn-group-yesno label,
.com-users-profile__edit .btn-group-yesno .btn,
.profile-edit .switcher label,
.profile-edit fieldset.radio label,
.profile-edit .radio.btn-group label,
.profile-edit .btn-group-yesno label,
.profile-edit .btn-group-yesno .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 26px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: 0 .34rem !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(243,247,245,.62) !important;
    font-size: .54rem !important;
    font-weight: 900 !important;
    letter-spacing: .035em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
}

#member-profile.bl-user-profile-form .switcher input:checked + label,
#member-profile.bl-user-profile-form fieldset.radio input:checked + label,
#member-profile.bl-user-profile-form .radio.btn-group input:checked + label,
#member-profile.bl-user-profile-form .btn-group-yesno input:checked + label,
#member-profile.bl-user-profile-form .btn-group-yesno .active,
.com-users-profile__edit .switcher input:checked + label,
.com-users-profile__edit fieldset.radio input:checked + label,
.com-users-profile__edit .radio.btn-group input:checked + label,
.com-users-profile__edit .btn-group-yesno input:checked + label,
.com-users-profile__edit .btn-group-yesno .active,
.profile-edit .switcher input:checked + label,
.profile-edit fieldset.radio input:checked + label,
.profile-edit .radio.btn-group input:checked + label,
.profile-edit .btn-group-yesno input:checked + label,
.profile-edit .btn-group-yesno .active {
    background: linear-gradient(180deg, rgba(0, 158, 104, .96), rgba(0, 100, 70, .96)) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px rgba(255,255,255,.16), 0 2px 8px rgba(0,0,0,.22) !important;
}

#member-profile.bl-user-profile-form .control-group:has(input[type="checkbox"]),
#member-profile.bl-user-profile-form .control-group:has(input[type="radio"]),
#member-profile.bl-user-profile-form .bl-field-row:has(input[type="checkbox"]),
#member-profile.bl-user-profile-form .bl-field-row:has(input[type="radio"]) {
    align-items: center !important;
}

#member-profile.bl-user-profile-form .control-group:has(.choices__list--multiple) .controls,
#member-profile.bl-user-profile-form .bl-field-row:has(.choices__list--multiple) .controls {
    overflow: visible !important;
}

/* v1.0.25 - Register link beside Login in the top login module. */
.bl-login-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: .32rem !important;
    margin: 0 !important;
}

.bl-register-btn,
.bl-top-login-area .bl-register-btn,
.bl-sidebar-right .bl-register-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 70px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: .32rem .6rem !important;
    border-radius: 4px !important;
    border: 1px solid rgba(0, 208, 132, .36) !important;
    background: linear-gradient(180deg, #0b8b60, #064c36) !important;
    color: #ffffff !important;
    font-size: .7rem !important;
    font-weight: 950 !important;
    letter-spacing: .045em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: inset 0 1px rgba(255,255,255,.22), 0 7px 16px rgba(0,0,0,.18) !important;
}

.bl-register-btn:hover,
.bl-register-btn:focus,
.bl-top-login-area .bl-register-btn:hover,
.bl-top-login-area .bl-register-btn:focus {
    background: linear-gradient(180deg, #0faf78, #076747) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}

.bl-top-login-area .bl-login-actions {
    flex-wrap: nowrap !important;
}

.bl-top-login-area .bl-login-options {
    display: none !important;
}

@media (max-width: 640px) {
    .bl-top-login-area .bl-login-actions {
        width: 100% !important;
        justify-content: center !important;
    }
}


/* BEERLEAGUE registration form hotfix - v1.0.1 */
.bl-registration-page {
  max-width: 760px;
  margin: 0 auto;
}

.bl-registration-header h1 {
  margin: 0 0 10px;
  color: #f5a400;
  font-size: 20px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.bl-registration-intro {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 180, 132, 0.45);
  border-radius: 10px;
  background: rgba(0, 30, 22, 0.72);
  color: #d9fff2;
  font-size: 12px;
  line-height: 1.45;
}

.bl-registration-form {
  display: grid;
  gap: 14px;
}

.bl-registration-card {
  margin: 0;
}

.bl-registration-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.bl-registration-field {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(185, 255, 225, 0.09);
}

.bl-registration-field:last-child {
  border-bottom: 0;
}

.bl-registration-field label,
.bl-registration-field .control-label {
  margin: 0;
  font-size: 11px;
  color: #f3fff9;
  font-weight: 800;
}

.bl-registration-field input[type="text"],
.bl-registration-field input[type="email"],
.bl-registration-field input[type="password"],
.bl-registration-field input[type="url"],
.bl-registration-field select {
  min-height: 26px;
  height: 26px;
  max-width: 430px;
  width: 100%;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
}

.bl-registration-field .form-text,
.bl-registration-note {
  margin-top: 3px;
  color: rgba(235, 255, 248, 0.72);
  font-size: 10px;
  line-height: 1.35;
}

.bl-registration-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
}

.bl-registration-actions .btn {
  min-height: 26px;
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 11px;
}

@media (max-width: 720px) {
  .bl-registration-field {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 4px;
  }

  .bl-registration-field input[type="text"],
  .bl-registration-field input[type="email"],
  .bl-registration-field input[type="password"],
  .bl-registration-field input[type="url"],
  .bl-registration-field select {
    max-width: 100%;
  }
}

/* v1.0.2 - Registration page matches compact Edit Profile card layout. */
.bl-registration-page.bl-user-profile-edit,
.com-users-registration.bl-registration-page {
    max-width: 1160px !important;
    width: 100% !important;
    margin-inline: auto !important;
}

#member-registration.bl-user-registration-form {
    display: block !important;
    max-width: 1160px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

#member-registration.bl-user-registration-form .bl-profile-grid,
#member-registration.bl-user-registration-form .bl-registration-profile-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(330px, 1fr)) !important;
    align-items: start !important;
    gap: .72rem !important;
    width: 100% !important;
}

#member-registration.bl-user-registration-form .bl-profile-card,
#member-registration.bl-user-registration-form .bl-registration-card {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: .62rem .72rem .68rem !important;
    border: 1px solid rgba(0, 208, 132, .24) !important;
    border-radius: 13px !important;
    background: linear-gradient(180deg, rgba(0, 38, 25, .78), rgba(0, 18, 13, .70)) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.035), 0 10px 22px rgba(0,0,0,.14) !important;
}

#member-registration.bl-user-registration-form .bl-profile-card legend,
#member-registration.bl-user-registration-form .bl-registration-card legend {
    width: auto !important;
    margin: -.18rem 0 .52rem !important;
    padding: .18rem .52rem !important;
    border: 1px solid rgba(0, 208, 132, .36) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(0, 150, 99, .32), rgba(0, 95, 66, .28)) !important;
    color: var(--bl-green-bright) !important;
    font-size: .62rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: .065em !important;
    text-transform: uppercase !important;
}

#member-registration.bl-user-registration-form .bl-registration-steam-strip {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: .55rem !important;
    margin: -.12rem 0 .55rem !important;
    padding: .5rem !important;
    border: 1px solid rgba(255, 173, 24, .22) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(255, 173, 24, .095), rgba(0, 208, 132, .075)) !important;
}

#member-registration.bl-user-registration-form .bl-registration-icon {
    display: grid !important;
    place-items: center !important;
    width: 46px !important;
    height: 46px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 173, 24, .48) !important;
    border-radius: 10px !important;
    background: rgba(0,0,0,.28) !important;
    color: var(--bl-logo-orange-bright) !important;
    font-size: .82rem !important;
    font-weight: 950 !important;
    letter-spacing: .05em !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.22) !important;
}

#member-registration.bl-user-registration-form .bl-registration-copy {
    display: grid !important;
    gap: .08rem !important;
    min-width: 0 !important;
}

#member-registration.bl-user-registration-form .bl-registration-copy strong {
    overflow: hidden !important;
    color: #fff !important;
    font-size: .82rem !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#member-registration.bl-user-registration-form .bl-registration-copy span,
#member-registration.bl-user-registration-form .bl-registration-mini-notes span,
#member-registration.bl-user-registration-form .bl-profile-fieldset-desc,
#member-registration.bl-user-registration-form .bl-registration-note {
    color: rgba(243,247,245,.66) !important;
    font-size: .64rem !important;
    line-height: 1.2 !important;
}

#member-registration.bl-user-registration-form .bl-registration-mini-notes {
    display: grid !important;
    gap: .42rem !important;
}

#member-registration.bl-user-registration-form .bl-registration-mini-notes > div {
    padding: .44rem .5rem !important;
    border: 1px solid rgba(0, 208, 132, .16) !important;
    border-radius: 10px !important;
    background: rgba(0,0,0,.12) !important;
}

#member-registration.bl-user-registration-form .bl-registration-mini-notes strong {
    display: block !important;
    margin: 0 0 .12rem !important;
    color: var(--bl-logo-orange-bright) !important;
    font-size: .64rem !important;
    line-height: 1.1 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
}

#member-registration.bl-user-registration-form .bl-field-row,
#member-registration.bl-user-registration-form .control-group,
#member-registration.bl-user-registration-form .bl-registration-field {
    display: grid !important;
    grid-template-columns: 116px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: .22rem .5rem !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: .25rem 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.045) !important;
}

#member-registration.bl-user-registration-form .bl-field-row:last-child,
#member-registration.bl-user-registration-form .control-group:last-child,
#member-registration.bl-user-registration-form .bl-registration-field:last-child {
    border-bottom: 0 !important;
}

#member-registration.bl-user-registration-form .bl-field-full {
    grid-template-columns: 1fr !important;
}

#member-registration.bl-user-registration-form .control-label,
#member-registration.bl-user-registration-form .control-label label,
#member-registration.bl-user-registration-form label {
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(243,247,245,.86) !important;
    font-size: .66rem !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    letter-spacing: .005em !important;
    text-shadow: none !important;
}

#member-registration.bl-user-registration-form .controls {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

#member-registration.bl-user-registration-form input[type="text"],
#member-registration.bl-user-registration-form input[type="password"],
#member-registration.bl-user-registration-form input[type="email"],
#member-registration.bl-user-registration-form input[type="url"],
#member-registration.bl-user-registration-form input[type="tel"],
#member-registration.bl-user-registration-form input[type="number"],
#member-registration.bl-user-registration-form input.form-control,
#member-registration.bl-user-registration-form select,
#member-registration.bl-user-registration-form select.form-select,
#member-registration.bl-user-registration-form select.custom-select,
#member-registration.bl-user-registration-form .inputbox,
#member-registration.bl-user-registration-form textarea {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 24px !important;
    height: 24px !important;
    padding: .16rem .42rem !important;
    border: 1px solid rgba(0, 208, 132, .20) !important;
    border-radius: 6px !important;
    background: rgba(248, 251, 249, .96) !important;
    color: #101714 !important;
    font-size: .7rem !important;
    line-height: 1.08 !important;
    box-shadow: inset 0 1px rgba(255,255,255,.7) !important;
}

#member-registration.bl-user-registration-form textarea {
    min-height: 56px !important;
    height: auto !important;
    padding: .32rem .42rem !important;
}

#member-registration.bl-user-registration-form .input-group {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    gap: .28rem !important;
}

#member-registration.bl-user-registration-form .input-password-toggle,
#member-registration.bl-user-registration-form .btn-secondary,
#member-registration.bl-user-registration-form button.btn,
#member-registration.bl-user-registration-form .btn:not(.bl-register-submit):not(.bl-register-cancel) {
    width: auto !important;
    min-width: 0 !important;
    min-height: 24px !important;
    height: 24px !important;
    padding: .18rem .44rem !important;
    border-radius: 6px !important;
    font-size: .58rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

#member-registration.bl-user-registration-form .form-text,
#member-registration.bl-user-registration-form .text-muted,
#member-registration.bl-user-registration-form .small,
#member-registration.bl-user-registration-form .form-control-feedback {
    display: block !important;
    margin-top: .08rem !important;
    color: rgba(243,247,245,.60) !important;
    font-size: .56rem !important;
    line-height: 1.15 !important;
}

#member-registration.bl-user-registration-form .choices {
    width: 100% !important;
    max-width: none !important;
    min-height: 24px !important;
    margin: 0 !important;
    overflow: visible !important;
}

#member-registration.bl-user-registration-form .choices__inner {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 26px !important;
    height: auto !important;
    padding: .1rem .32rem !important;
    overflow: hidden !important;
    border: 1px solid rgba(0, 208, 132, .20) !important;
    border-radius: 6px !important;
    background: rgba(248, 251, 249, .96) !important;
    color: #101714 !important;
    font-size: .68rem !important;
    line-height: 1.05 !important;
}

#member-registration.bl-user-registration-form .choices__list--multiple {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: .12rem !important;
    width: 100% !important;
    min-height: 20px !important;
    padding: 0 !important;
}

#member-registration.bl-user-registration-form .choices__item,
#member-registration.bl-user-registration-form .choices__input {
    font-size: .68rem !important;
    line-height: 1.05 !important;
}

#member-registration.bl-user-registration-form .choices__input {
    flex: 1 1 120px !important;
    width: auto !important;
    min-width: 118px !important;
    max-width: 100% !important;
    min-height: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: .04rem .18rem !important;
    font-size: .64rem !important;
    line-height: 1 !important;
}

#member-registration.bl-user-registration-form .choices__list--multiple .choices__item,
#member-registration.bl-user-registration-form .choices__item--selectable {
    display: inline-flex !important;
    align-items: center !important;
    gap: .16rem !important;
    max-width: 100% !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: .12rem .22rem !important;
    border-radius: 999px !important;
    font-size: .58rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

#member-registration.bl-user-registration-form .choices [data-button],
#member-registration.bl-user-registration-form [class*="choices__button"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 13px !important;
    width: 13px !important;
    min-width: 13px !important;
    max-width: 13px !important;
    height: 13px !important;
    min-height: 13px !important;
    max-height: 13px !important;
    margin: 0 0 0 .12rem !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(0, 25, 18, .50) !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-indent: -9999px !important;
    text-shadow: none !important;
    overflow: hidden !important;
    box-shadow: inset 0 1px rgba(255,255,255,.16) !important;
}

#member-registration.bl-user-registration-form .choices [data-button]::after,
#member-registration.bl-user-registration-form [class*="choices__button"]::after {
    content: "×" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 13px !important;
    height: 13px !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-indent: 0 !important;
}

#member-registration.bl-user-registration-form input[type="checkbox"],
#member-registration.bl-user-registration-form input[type="radio"] {
    appearance: auto !important;
    accent-color: #008e61 !important;
    width: 13px !important;
    min-width: 13px !important;
    max-width: 13px !important;
    height: 13px !important;
    min-height: 13px !important;
    max-height: 13px !important;
    margin: 0 .28rem 0 0 !important;
    padding: 0 !important;
    border-radius: 3px !important;
    vertical-align: middle !important;
    box-shadow: none !important;
}

#member-registration.bl-user-registration-form .bl-profile-actions-bar,
#member-registration.bl-user-registration-form .bl-registration-actions {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: .45rem !important;
    margin-top: .72rem !important;
    padding-top: .62rem !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
}

#member-registration.bl-user-registration-form .bl-profile-actions-bar .btn,
#member-registration.bl-user-registration-form .bl-registration-actions .btn,
#member-registration.bl-user-registration-form .bl-register-submit,
#member-registration.bl-user-registration-form .bl-register-cancel {
    width: auto !important;
    min-width: 0 !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: .22rem .62rem !important;
    border-radius: 7px !important;
    font-size: .64rem !important;
    line-height: 1 !important;
}

@media (max-width: 980px) {
    #member-registration.bl-user-registration-form .bl-profile-grid,
    #member-registration.bl-user-registration-form .bl-registration-profile-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 620px) {
    #member-registration.bl-user-registration-form .bl-profile-card,
    #member-registration.bl-user-registration-form .bl-registration-card {
        padding: .58rem !important;
    }

    #member-registration.bl-user-registration-form .bl-field-row,
    #member-registration.bl-user-registration-form .control-group,
    #member-registration.bl-user-registration-form .bl-registration-field {
        grid-template-columns: 1fr !important;
        gap: .12rem !important;
        padding: .3rem 0 !important;
    }

    #member-registration.bl-user-registration-form .bl-registration-steam-strip {
        grid-template-columns: 40px minmax(0, 1fr) !important;
    }

    #member-registration.bl-user-registration-form .bl-registration-icon {
        width: 40px !important;
        height: 40px !important;
    }
}


/* v1.0.3 - Registration Steam ID required polish. */
.bl-registration-card-beerleague-stats .control-label label,
.bl-registration-card-beerleague-stats .control-label {
    color: var(--bl-text, #f2fff8);
}
.bl-registration-page .bl-field-steamid input[required],
.bl-registration-page .bl-field-steamid input.required {
    border-color: rgba(255, 184, 0, 0.68);
    box-shadow: 0 0 0 1px rgba(255, 184, 0, 0.16);
}

/* Template font controls */
h1, h2, h3, h4, h5, h6,
.bl-top-menu a,
.bl-top-menu .nav-link,
.bl-btn, .btn, button, input[type="submit"],
.bl-footer-note,
legend,
fieldset legend,
.page-header,
.componentheading,
.contentheading {
    font-family: var(--bl-font-display);
}


/* v1.0.6 - Full-width server status strip under menu. */
.bl-header-inner {
    width: min(1380px, calc(100% - 32px)) !important;
}
.bl-server-status-row {
    width: 100% !important;
    max-width: 100% !important;
    margin: .45rem auto .55rem !important;
    gap: .72rem !important;
    align-items: stretch !important;
}
.bl-server-status-slot,
.bl-server-status-row > * {
    min-width: 0 !important;
    width: 100% !important;
}
.bl-server-status-row .moduletable,
.bl-server-status-row .card,
.bl-server-status-row .well {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    padding: .55rem !important;
    border-radius: 6px !important;
}
.bl-server-status-row .blsrv-status-module {
    height: 100% !important;
}
.bl-server-status-row .blsrv-status-slider,
.bl-server-status-row .blsrv-status-slide,
.bl-server-status-row .blsrv-status-card {
    height: 100% !important;
}
@media (max-width: 1140px) {
    .bl-server-status-count-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 760px) {
    .bl-server-status-row,
    .bl-server-status-count-2,
    .bl-server-status-count-3 {
        grid-template-columns: 1fr !important;
    }
}


/* v1.0.7 - make top server status positions use the whole header width and do not let module helper row max-width shrink them. */
.bl-server-status-row.blsrv-status-row { width: 100% !important; max-width: 100% !important; grid-template-columns: repeat(var(--bl-server-status-columns, 3), minmax(0, 1fr)) !important; }
.bl-server-status-count-1 { --bl-server-status-columns: 1; }
.bl-server-status-count-2 { --bl-server-status-columns: 2; }
.bl-server-status-count-3 { --bl-server-status-columns: 3; }
.bl-server-status-row .blsrv-status-module-shell > h3,
.bl-server-status-row .moduletable > h3 { display: none !important; }


/* v1.0.8 - repaired server-status strip spacing after module tile cleanup. */
.bl-server-status-row {
    gap: .8rem !important;
    margin-top: .5rem !important;
    margin-bottom: .65rem !important;
}
.bl-server-status-row .moduletable,
.bl-server-status-row .card,
.bl-server-status-row .well {
    padding: .5rem !important;
    border-radius: 8px !important;
}
.bl-server-status-row .blsrv-status-module-head .blsrv-status-heading {
    color: #e9f5ee !important;
}


/* v1.0.9 - compact server status strip: prevent forced equal-height clipping. */
.bl-server-status-row {
    align-items: start !important;
    overflow: visible !important;
    margin-top: .42rem !important;
    margin-bottom: .55rem !important;
}
.bl-server-status-slot,
.bl-server-status-row > * {
    overflow: visible !important;
    min-width: 0 !important;
}
.bl-server-status-row .moduletable,
.bl-server-status-row .card,
.bl-server-status-row .well {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: .4rem !important;
    border-radius: 8px !important;
}
.bl-server-status-row .blsrv-status-module,
.bl-server-status-row .blsrv-status-slider,
.bl-server-status-row .blsrv-status-slide,
.bl-server-status-row .blsrv-status-card {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}
.bl-server-status-row .blsrv-status-module-head .blsrv-status-heading {
    color: #e9f5ee !important;
}


/* v1.0.10 - extra breathing room above server-status tiles and safer compact tile fit. */
.bl-server-status-row {
    margin-top: 1.25rem !important;
    margin-bottom: .7rem !important;
}
.bl-server-status-row .moduletable,
.bl-server-status-row .card,
.bl-server-status-row .well {
    padding: .36rem !important;
}
.bl-server-status-row .blsrv-status-module-head {
    margin-bottom: 6px !important;
}
.bl-server-status-row .blsrv-status-card {
    overflow: visible !important;
}


/* v1.0.11 - equal-height server-status strip. Keeps the three top server tiles lined up even when one module has carousel controls. */
.bl-server-status-row {
    align-items: stretch !important;
    overflow: visible !important;
}
.bl-server-status-slot,
.bl-server-status-row > *,
.bl-server-status-row .moduletable,
.bl-server-status-row .module,
.bl-server-status-row .card,
.bl-server-status-row .well {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: visible !important;
}
.bl-server-status-row .blsrv-status-module,
.bl-server-status-row .blsrv-status-slider,
.bl-server-status-row .blsrv-status-slide,
.bl-server-status-row .blsrv-status-card {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: visible !important;
}
.bl-server-status-row .blsrv-status-card {
    min-height: 166px !important;
}
@media (max-width: 1120px) {
    .bl-server-status-row .blsrv-status-card {
        height: auto !important;
        min-height: 0 !important;
    }
}


/* v1.0.12 - server-status carousel safety.
   Keep equal height tiles, but never let Atum/template flex rules override the module's hidden carousel slides. */
.bl-server-status-row .blsrv-status-slide[hidden],
.bl-server-status-row .blsrv-status-module-v1013 .blsrv-status-slide[hidden],
.bl-server-status-row .blsrv-status-module-v1013 article[hidden] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    flex: 0 0 0 !important;
    overflow: hidden !important;
}
.bl-server-status-row .blsrv-status-module-v1013 .blsrv-status-slide:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}
.bl-server-status-row .blsrv-status-module-v1013 .blsrv-status-card {
    min-height: 148px !important;
}
.bl-server-status-row .blsrv-status-module-v1013 .blsrv-status-actions {
    justify-content: flex-end !important;
}


/* v1.0.13 - tasteful BEERLEAGUE background transition.
   Keeps the branded dark/grid feel at the top, fades into a clean white lower page,
   and blends low-opacity pint glasses into the background without competing with content. */
html {
    background: #ffffff;
}
body.beerleague-site {
    background-color: #ffffff;
    background-image:
        url("../images/beerleague_pint_bg.png"),
        url("../images/beerleague_pint_bg.png"),
        radial-gradient(circle at 50% -10%, rgba(0, 208, 132, .13), transparent 42rem),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(180deg,
            #04120d 0,
            #020706 34rem,
            #06261b 44rem,
            #f6faf8 64rem,
            #ffffff 100%);
    background-size: 270px 270px, 430px 430px, auto, 42px 42px, 42px 42px, auto;
    background-position: -2rem 8rem, calc(100% + 7rem) 20rem, 50% -10%, left top, left top, left top;
    background-repeat: repeat, repeat, no-repeat, repeat, repeat, no-repeat;
    overflow-x: hidden;
}
.bl-footer {
    color: #284038;
    border-top-color: rgba(0, 122, 85, .18);
}
.bl-footer a {
    color: #006a47;
}
@media (max-width: 900px) {
    body.beerleague-site {
        background-size: 220px 220px, 340px 340px, auto, 36px 36px, 36px 36px, auto;
        background-position: -4rem 8rem, calc(100% + 5rem) 24rem, 50% -10%, left top, left top, left top;
    }
}


/* v1.0.14 - center black-to-transparent header fade.
   Keeps the branded grid/pint background visible on the sides, while adding a dark center
   behind the logo, menu, and server status modules. The overlay fades out as the page scrolls down. */
body.beerleague-site {
    position: relative;
    isolation: isolate;
}

body.beerleague-site::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 50%;
    width: min(1240px, calc(100% - 18px));
    height: 66rem;
    transform: translateX(-50%);
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, .98) 0,
        rgba(0, 0, 0, .96) 34rem,
        rgba(0, 0, 0, .72) 45rem,
        rgba(0, 0, 0, .30) 56rem,
        rgba(0, 0, 0, 0) 66rem);
    -webkit-mask-image: linear-gradient(90deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, .70) 4%,
        rgba(0, 0, 0, 1) 11%,
        rgba(0, 0, 0, 1) 89%,
        rgba(0, 0, 0, .70) 96%,
        rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(90deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, .70) 4%,
        rgba(0, 0, 0, 1) 11%,
        rgba(0, 0, 0, 1) 89%,
        rgba(0, 0, 0, .70) 96%,
        rgba(0, 0, 0, 0) 100%);
}

.bl-top-login-area,
.bl-site-header,
.bl-featured-section,
.bl-main,
.bl-footer {
    position: relative;
    z-index: 1;
}

@media (max-width: 900px) {
    body.beerleague-site::before {
        width: 100%;
        height: 54rem;
        background: linear-gradient(180deg,
            rgba(0, 0, 0, .98) 0,
            rgba(0, 0, 0, .95) 28rem,
            rgba(0, 0, 0, .62) 39rem,
            rgba(0, 0, 0, .18) 48rem,
            rgba(0, 0, 0, 0) 54rem);
        -webkit-mask-image: linear-gradient(90deg,
            rgba(0, 0, 0, .88) 0%,
            rgba(0, 0, 0, 1) 8%,
            rgba(0, 0, 0, 1) 92%,
            rgba(0, 0, 0, .88) 100%);
        mask-image: linear-gradient(90deg,
            rgba(0, 0, 0, .88) 0%,
            rgba(0, 0, 0, 1) 8%,
            rgba(0, 0, 0, 1) 92%,
            rgba(0, 0, 0, .88) 100%);
    }
}


/* v1.0.16 - refined subtle pint-glass background.
   Reverts the v1.0.15 photo/can background attempt and returns to the v1.0.14 feel:
   dark BEERLEAGUE grid sides, black center fade behind the header/server modules,
   and a quieter realistic pint-glass watermark pattern that stays in the background. */
body.beerleague-site {
    background-image:
        url("../images/beerleague_pint_bg.png"),
        url("../images/beerleague_pint_bg.png"),
        radial-gradient(circle at 50% -10%, rgba(0, 208, 132, .13), transparent 42rem),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(180deg,
            #04120d 0,
            #020706 34rem,
            #06261b 44rem,
            #f6faf8 64rem,
            #ffffff 100%);
    background-size: 300px 300px, 480px 480px, auto, 42px 42px, 42px 42px, auto;
    background-position: -3rem 8rem, calc(100% + 8rem) 21rem, 50% -10%, left top, left top, left top;
    background-repeat: repeat, repeat, no-repeat, repeat, repeat, no-repeat;
}

@media (max-width: 900px) {
    body.beerleague-site {
        background-size: 235px 235px, 370px 370px, auto, 36px 36px, 36px 36px, auto;
        background-position: -5rem 8rem, calc(100% + 6rem) 24rem, 50% -10%, left top, left top, left top;
    }
}


/* v1.0.17 - refined full pint background asset.
   Pint glasses are now filled to the foam line and the BEERLEAGUE marks sit higher on the glass. */


/* v1.0.17 - refined full pint background asset.
   Pint glasses are now filled to the foam line and the BEERLEAGUE marks sit higher on the glass. */


/* v1.0.18 - BEERLEAGUE logo watermark background.
   Replaces the subtle pint-glass background pattern with the BEERLEAGUE logo mark.
   The center black-to-transparent fade remains in place so the header and server modules stay readable. */
body.beerleague-site {
    background-image:
        url("../images/beerleague_logo_bg.png"),
        url("../images/beerleague_logo_bg.png"),
        radial-gradient(circle at 50% -10%, rgba(0, 208, 132, .13), transparent 42rem),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(180deg,
            #04120d 0,
            #020706 34rem,
            #06261b 44rem,
            #f6faf8 64rem,
            #ffffff 100%);
    background-size: 360px 360px, 520px 520px, auto, 42px 42px, 42px 42px, auto;
    background-position: -6rem 7rem, calc(100% + 7rem) 20rem, 50% -10%, left top, left top, left top;
    background-repeat: repeat-y, repeat-y, no-repeat, repeat, repeat, no-repeat;
}

@media (max-width: 900px) {
    body.beerleague-site {
        background-size: 300px 300px, 430px 430px, auto, 36px 36px, 36px 36px, auto;
        background-position: -8rem 8rem, calc(100% + 7rem) 23rem, 50% -10%, left top, left top, left top;
    }
}


/* v1.0.19 - varied BEERLEAGUE logo watermark background.
   Uses multiple logo sizes, rotations, and offsets on the side background while keeping the
   center black-to-transparent fade behind the header/server modules for readability. */
body.beerleague-site {
    background-image:
        url("../images/beerleague_logo_bg_left.png"),
        url("../images/beerleague_logo_bg_right.png"),
        radial-gradient(circle at 50% -10%, rgba(0, 208, 132, .13), transparent 42rem),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(180deg,
            #04120d 0,
            #020706 34rem,
            #06261b 44rem,
            #f6faf8 64rem,
            #ffffff 100%);
    background-size: 620px 815px, 760px 998px, auto, 42px 42px, 42px 42px, auto;
    background-position: -11rem 4rem, calc(100% + 15rem) 11rem, 50% -10%, left top, left top, left top;
    background-repeat: repeat-y, repeat-y, no-repeat, repeat, repeat, no-repeat;
}

@media (max-width: 900px) {
    body.beerleague-site {
        background-size: 430px 565px, 520px 682px, auto, 36px 36px, 36px 36px, auto;
        background-position: -12rem 7rem, calc(100% + 13rem) 20rem, 50% -10%, left top, left top, left top;
    }
}


/* v1.0.20 - denser logo sides and crisp center content panel.
   Adds more varied BEERLEAGUE logo marks to the side background, reduces empty gaps,
   and widens the black center panel so the header, body, sidebars, and modules sit on
   a solid dark field. Horizontal panel edges are intentionally crisp, not feathered. */
body.beerleague-site {
    background-image:
        url("../images/beerleague_logo_bg_left.png"),
        url("../images/beerleague_logo_bg_right.png"),
        radial-gradient(circle at 50% -10%, rgba(0, 208, 132, .13), transparent 42rem),
        linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.026) 1px, transparent 1px),
        linear-gradient(180deg,
            #04120d 0,
            #020706 34rem,
            #06261b 45rem,
            #dfe9e4 66rem,
            #ffffff 100%);
    background-size: 700px 843px, 760px 916px, auto, 42px 42px, 42px 42px, auto;
    background-position: -17rem 1.8rem, calc(100% + 16rem) 3.2rem, 50% -10%, left top, left top, left top;
    background-repeat: repeat-y, repeat-y, no-repeat, repeat, repeat, no-repeat;
}

body.beerleague-site::before {
    top: 0;
    left: 50%;
    width: min(1408px, calc(100% - 20px));
    height: 124rem;
    transform: translateX(-50%);
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 1) 0,
        rgba(0, 0, 0, 1) 58rem,
        rgba(0, 0, 0, .98) 72rem,
        rgba(0, 0, 0, .82) 88rem,
        rgba(0, 0, 0, .44) 106rem,
        rgba(0, 0, 0, 0) 124rem);
    -webkit-mask-image: none;
    mask-image: none;
    border-left: 1px solid rgba(0, 208, 132, .10);
    border-right: 1px solid rgba(0, 208, 132, .10);
}

@media (max-width: 1500px) {
    body.beerleague-site::before {
        width: min(1384px, calc(100% - 18px));
    }
}

@media (max-width: 900px) {
    body.beerleague-site {
        background-size: 520px 626px, 560px 675px, auto, 36px 36px, 36px 36px, auto;
        background-position: -15rem 5rem, calc(100% + 14rem) 13rem, 50% -10%, left top, left top, left top;
    }

    body.beerleague-site::before {
        width: 100%;
        height: 94rem;
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 1) 0,
            rgba(0, 0, 0, 1) 46rem,
            rgba(0, 0, 0, .86) 62rem,
            rgba(0, 0, 0, .35) 80rem,
            rgba(0, 0, 0, 0) 94rem);
        border-left: 0;
        border-right: 0;
    }
}


/* v1.0.21 - upgraded main logo with bar-neon startup animation.
   Replaces the old wide header art with the upgraded BEERLEAGUE mark and makes it
   start dim, flicker on like a neon beer sign, then settle into a subtle glow. */
.bl-brand {
    position: relative !important;
    isolation: isolate;
    overflow: visible;
    margin: .35rem auto .75rem !important;
    transform: translateZ(0);
}

.bl-brand::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -22%;
    pointer-events: none;
    background: url("../images/beerleague_logo.png") center center / contain no-repeat;
    opacity: 0;
    filter: blur(17px) brightness(1.25) saturate(1.45);
    animation:
        bl-neon-halo-start 3.45s ease-out 1 both,
        bl-neon-halo-pulse 4.8s ease-in-out 3.45s infinite;
}

.bl-brand img {
    width: min(335px, 68vw) !important;
    max-height: none !important;
    height: auto !important;
    position: relative;
    z-index: 1;
    opacity: .50;
    filter: brightness(.42) saturate(.72) contrast(.92) drop-shadow(0 0 0 rgba(255, 173, 24, 0));
    animation:
        bl-neon-logo-start 3.45s ease-out 1 forwards,
        bl-neon-logo-pulse 4.8s ease-in-out 3.45s infinite;
    will-change: filter, opacity;
}

@keyframes bl-neon-logo-start {
    0%, 8% {
        opacity: .46;
        filter: brightness(.36) saturate(.62) contrast(.90) drop-shadow(0 0 0 rgba(255, 173, 24, 0));
    }
    9% {
        opacity: .92;
        filter: brightness(1.15) saturate(1.12) contrast(1.04)
            drop-shadow(0 0 7px rgba(255, 173, 24, .55))
            drop-shadow(0 0 15px rgba(0, 208, 132, .22));
    }
    11% {
        opacity: .48;
        filter: brightness(.40) saturate(.70) contrast(.92) drop-shadow(0 0 1px rgba(255, 173, 24, .08));
    }
    14% {
        opacity: .98;
        filter: brightness(1.30) saturate(1.22) contrast(1.06)
            drop-shadow(0 0 9px rgba(255, 173, 24, .74))
            drop-shadow(0 0 22px rgba(0, 208, 132, .32));
    }
    16.5% {
        opacity: .62;
        filter: brightness(.54) saturate(.82) contrast(.94) drop-shadow(0 0 2px rgba(255, 173, 24, .14));
    }
    20% {
        opacity: 1;
        filter: brightness(1.42) saturate(1.32) contrast(1.08)
            drop-shadow(0 0 12px rgba(255, 173, 24, .86))
            drop-shadow(0 0 30px rgba(0, 208, 132, .42));
    }
    25%, 100% {
        opacity: 1;
        filter: brightness(1.13) saturate(1.10) contrast(1.03)
            drop-shadow(0 0 7px rgba(255, 173, 24, .52))
            drop-shadow(0 0 18px rgba(0, 208, 132, .28))
            drop-shadow(0 12px 26px rgba(0, 0, 0, .65));
    }
}

@keyframes bl-neon-halo-start {
    0%, 8%, 11%, 16.5% { opacity: .02; }
    9% { opacity: .22; }
    14% { opacity: .34; }
    20% { opacity: .48; }
    25%, 100% { opacity: .30; }
}

@keyframes bl-neon-logo-pulse {
    0%, 100% {
        filter: brightness(1.10) saturate(1.08) contrast(1.03)
            drop-shadow(0 0 7px rgba(255, 173, 24, .50))
            drop-shadow(0 0 18px rgba(0, 208, 132, .25))
            drop-shadow(0 12px 26px rgba(0, 0, 0, .65));
    }
    50% {
        filter: brightness(1.20) saturate(1.15) contrast(1.04)
            drop-shadow(0 0 10px rgba(255, 173, 24, .66))
            drop-shadow(0 0 26px rgba(0, 208, 132, .36))
            drop-shadow(0 14px 30px rgba(0, 0, 0, .70));
    }
}

@keyframes bl-neon-halo-pulse {
    0%, 100% { opacity: .26; filter: blur(16px) brightness(1.20) saturate(1.40); }
    50% { opacity: .40; filter: blur(18px) brightness(1.38) saturate(1.58); }
}

@media (max-width: 900px) {
    .bl-brand { margin: .35rem auto .65rem !important; }
    .bl-brand img { width: min(310px, 78vw) !important; }
}

@media (prefers-reduced-motion: reduce) {
    .bl-brand::before,
    .bl-brand img {
        animation: none !important;
    }
    .bl-brand::before {
        opacity: .30;
    }
    .bl-brand img {
        opacity: 1;
        filter: brightness(1.12) saturate(1.10) contrast(1.03)
            drop-shadow(0 0 7px rgba(255, 173, 24, .48))
            drop-shadow(0 0 18px rgba(0, 208, 132, .24))
            drop-shadow(0 12px 26px rgba(0, 0, 0, .65));
    }
}


/* v1.0.22 - compact top-left neon logo + shorter header fade.
   Moves the upgraded BEERLEAGUE logo to the upper-left of the site at about half
   the prior header size. The center black panel now stays solid through the main
   menu, then fades to transparent halfway through the three server-status modules. */
.bl-site-header {
    padding-top: .35rem !important;
}

.bl-header-inner {
    width: min(1408px, calc(100% - 20px)) !important;
    text-align: left !important;
    position: relative;
}

.bl-brand {
    display: inline-flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin: .05rem 0 .30rem clamp(.55rem, 1.2vw, 1.1rem) !important;
    position: relative !important;
    z-index: 4;
}

.bl-brand::before {
    inset: -34% !important;
    background-position: left center !important;
}

.bl-brand img {
    width: min(168px, 28vw) !important;
    max-width: 168px !important;
}

.bl-top-menu,
.bl-server-status-row,
.bl-top-search-area,
.bl-beerleague-nav-area {
    text-align: center;
}

body.beerleague-site::before {
    width: min(1408px, calc(100% - 20px));
    height: 20.5rem;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 1) 0,
        rgba(0, 0, 0, 1) 10.75rem,
        rgba(0, 0, 0, .82) 13.5rem,
        rgba(0, 0, 0, .36) 16.5rem,
        rgba(0, 0, 0, 0) 20.5rem) !important;
    border-left: 1px solid rgba(0, 208, 132, .10);
    border-right: 1px solid rgba(0, 208, 132, .10);
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

@media (max-width: 900px) {
    .bl-header-inner {
        width: min(100% - 18px, 100%) !important;
        text-align: center !important;
    }

    .bl-brand {
        margin: .15rem auto .45rem !important;
        justify-content: center !important;
    }

    .bl-brand img {
        width: min(190px, 58vw) !important;
        max-width: 190px !important;
    }

    body.beerleague-site::before {
        width: 100%;
        height: 25rem;
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 1) 0,
            rgba(0, 0, 0, 1) 12.5rem,
            rgba(0, 0, 0, .64) 17rem,
            rgba(0, 0, 0, .18) 21rem,
            rgba(0, 0, 0, 0) 25rem) !important;
        border-left: 0;
        border-right: 0;
    }
}


/* v1.0.23 - top utility menu + centered 75% neon logo.
   Moves the main menu to the very top row above the logo, aligned to the left side
   of the same top bar that holds the login controls. The upgraded neon logo is
   centered again and displayed at roughly a 25% reduction from the original neon size
   instead of the prior half-size placement. */
.bl-top-login-area {
    padding: .32rem 0 .12rem !important;
}

.bl-top-login-inner {
    width: min(1408px, calc(100% - 20px)) !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .85rem !important;
    margin-inline: auto !important;
}

.bl-top-login-module {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
}

.bl-top-login-area .bl-top-menu,
.bl-top-menu-utility {
    width: auto !important;
    max-width: calc(100% - 390px) !important;
    margin: 0 !important;
    padding: .20rem !important;
    flex: 0 1 auto !important;
    text-align: left !important;
    border-radius: 6px !important;
}

.bl-top-login-area .bl-top-menu ul,
.bl-top-menu-utility ul {
    justify-content: flex-start !important;
    gap: .34rem !important;
    flex-wrap: wrap !important;
}

.bl-top-login-area .bl-top-menu a,
.bl-top-login-area .bl-top-menu .nav-link,
.bl-top-menu-utility a,
.bl-top-menu-utility .nav-link {
    min-height: 30px !important;
    padding: .38rem .62rem !important;
    font-size: .72rem !important;
    letter-spacing: .035em !important;
}

.bl-site-header {
    padding-top: .28rem !important;
    padding-bottom: .60rem !important;
}

.bl-header-inner {
    width: min(1408px, calc(100% - 20px)) !important;
    text-align: center !important;
    position: relative;
}

.bl-brand {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: .72rem auto 1.05rem !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 4;
}

.bl-brand::before {
    inset: -28% !important;
    background-position: center center !important;
}

.bl-brand img {
    width: min(252px, 46vw) !important;
    max-width: 252px !important;
}

.bl-server-status-row,
.bl-top-search-area,
.bl-beerleague-nav-area {
    text-align: center;
}

body.beerleague-site::before {
    width: min(1408px, calc(100% - 20px));
    height: 31rem;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 1) 0,
        rgba(0, 0, 0, 1) 22.5rem,
        rgba(0, 0, 0, .78) 25.5rem,
        rgba(0, 0, 0, .36) 28.25rem,
        rgba(0, 0, 0, 0) 31rem) !important;
    border-left: 1px solid rgba(0, 208, 132, .10);
    border-right: 1px solid rgba(0, 208, 132, .10);
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

@media (max-width: 1100px) {
    .bl-top-login-inner {
        align-items: flex-start !important;
    }

    .bl-top-login-area .bl-top-menu,
    .bl-top-menu-utility {
        max-width: calc(100% - 260px) !important;
    }

    .bl-top-login-area .bl-top-menu a,
    .bl-top-login-area .bl-top-menu .nav-link,
    .bl-top-menu-utility a,
    .bl-top-menu-utility .nav-link {
        min-height: 28px !important;
        padding: .34rem .50rem !important;
        font-size: .68rem !important;
    }
}

@media (max-width: 900px) {
    .bl-top-login-inner {
        width: min(100% - 18px, 100%) !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: .45rem !important;
    }

    .bl-top-login-module {
        margin-left: 0 !important;
        justify-content: center !important;
    }

    .bl-top-login-area .bl-top-menu,
    .bl-top-menu-utility {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .bl-top-login-area .bl-top-menu ul,
    .bl-top-menu-utility ul {
        justify-content: center !important;
    }

    .bl-header-inner {
        width: min(100% - 18px, 100%) !important;
        text-align: center !important;
    }

    .bl-brand {
        margin: .62rem auto .88rem !important;
        justify-content: center !important;
    }

    .bl-brand img {
        width: min(235px, 68vw) !important;
        max-width: 235px !important;
    }

    body.beerleague-site::before {
        width: 100%;
        height: 37rem;
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 1) 0,
            rgba(0, 0, 0, 1) 25rem,
            rgba(0, 0, 0, .68) 30rem,
            rgba(0, 0, 0, .20) 34rem,
            rgba(0, 0, 0, 0) 37rem) !important;
        border-left: 0;
        border-right: 0;
    }
}


/* v1.0.24 - restore Top Menu visibility in the new utility row.
   The older slim-login CSS hid all UL elements inside .bl-top-login-area so the menu
   module moved into that row was present but invisible. This override keeps the
   login option lists hidden while allowing the Top Menu module to render at the
   upper-left of the utility row. */
.bl-top-login-area .bl-top-menu-utility,
.bl-top-login-area nav.bl-top-menu-utility {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 55 !important;
}

.bl-top-login-area .bl-top-menu-utility ul,
.bl-top-login-area .bl-top-menu-utility .mod-menu,
.bl-top-login-area .bl-top-menu-utility .navbar-nav,
.bl-top-login-area .bl-top-menu-utility .nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: .34rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.bl-top-login-area .bl-top-menu-utility li,
.bl-top-login-area .bl-top-menu-utility .nav-item {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bl-top-login-area .bl-top-menu-utility a,
.bl-top-login-area .bl-top-menu-utility .nav-link {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.bl-top-login-area .bl-top-menu-utility .moduletable,
.bl-top-login-area .bl-top-menu-utility .card,
.bl-top-login-area .bl-top-menu-utility .well {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

@media (max-width: 900px) {
    .bl-top-login-area .bl-top-menu-utility ul,
    .bl-top-login-area .bl-top-menu-utility .mod-menu,
    .bl-top-login-area .bl-top-menu-utility .navbar-nav,
    .bl-top-login-area .bl-top-menu-utility .nav {
        justify-content: center !important;
    }
}


/* v1.0.25 - centered top menu, login beside searches, and roomier logo stack.
   The top row now only contains the Top Menu and centers it. The Top Login module
   was moved down to the right side of the Top Search row. The main neon logo keeps
   the 25%-reduced size but has more breathing room above and below it. */
.bl-top-login-area.bl-top-menu-only {
    padding: .48rem 0 .20rem !important;
}

.bl-top-login-area.bl-top-menu-only .bl-top-login-inner {
    width: min(1408px, calc(100% - 20px)) !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-inline: auto !important;
}

.bl-top-login-area.bl-top-menu-only .bl-top-menu,
.bl-top-login-area.bl-top-menu-only .bl-top-menu-utility {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    flex: 0 1 auto !important;
}

.bl-top-login-area.bl-top-menu-only .bl-top-menu-utility ul,
.bl-top-login-area.bl-top-menu-only .bl-top-menu-utility .mod-menu,
.bl-top-login-area.bl-top-menu-only .bl-top-menu-utility .navbar-nav,
.bl-top-login-area.bl-top-menu-only .bl-top-menu-utility .nav {
    justify-content: center !important;
}

.bl-site-header {
    padding-top: .18rem !important;
    padding-bottom: .70rem !important;
}

.bl-brand {
    margin: 1.18rem auto 1.62rem !important;
}

.bl-brand img {
    width: min(252px, 46vw) !important;
    max-width: 252px !important;
}

.bl-server-status-row {
    margin-top: .10rem !important;
    margin-bottom: .82rem !important;
}

.bl-search-login-row {
    width: min(1408px, calc(100% - 20px));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .72rem;
    margin: .15rem auto .62rem;
    position: relative;
    z-index: 4;
}

.bl-search-login-row .bl-top-search-area {
    flex: 1 1 auto;
    width: auto !important;
    max-width: 890px !important;
    min-width: 0;
    margin: 0 !important;
}

.bl-search-login-module.bl-top-login-area {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 5 !important;
}

.bl-search-login-module .bl-top-login-module {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
}

.bl-search-login-module.bl-top-login-area .mod-login,
.bl-search-login-module.bl-top-login-area .login,
.bl-search-login-module.bl-top-login-area form[id*="login"],
.bl-search-login-module.bl-top-login-area form {
    padding: .30rem .42rem !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, rgba(0,0,0,.70), rgba(6,38,27,.66)) !important;
}

.bl-search-login-module.bl-top-login-area .mod-login__userdata,
.bl-search-login-module.bl-top-login-area .userdata,
.bl-search-login-module.bl-top-login-area .login-greeting,
.bl-search-login-module.bl-top-login-area .mod-login__greeting {
    font-size: .76rem !important;
}

.bl-search-login-module.bl-top-login-area .bl-profile-btn,
.bl-search-login-module.bl-top-login-area .bl-edit-profile-btn,
.bl-search-login-module.bl-top-login-area .bl-logout-btn,
.bl-search-login-module.bl-top-login-area button[type="submit"],
.bl-search-login-module.bl-top-login-area input[type="submit"] {
    min-height: 30px !important;
    height: 30px !important;
    padding: .34rem .60rem !important;
    font-size: .66rem !important;
}

.bl-search-login-module.bl-top-login-area input[type="text"],
.bl-search-login-module.bl-top-login-area input[type="password"],
.bl-search-login-module.bl-top-login-area input[type="email"],
.bl-search-login-module.bl-top-login-area input[type="username"] {
    height: 30px !important;
    min-height: 30px !important;
    width: 130px !important;
    min-width: 118px !important;
    max-width: 145px !important;
    padding: .35rem .55rem !important;
    font-size: .74rem !important;
}

/* Keep the black panel solid through the menu/logo/server block, then fade around the search/login row. */
body.beerleague-site::before {
    height: 33rem !important;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 1) 0,
        rgba(0, 0, 0, 1) 25.8rem,
        rgba(0, 0, 0, .80) 28.2rem,
        rgba(0, 0, 0, .36) 30.7rem,
        rgba(0, 0, 0, 0) 33rem) !important;
}

@media (max-width: 1220px) {
    .bl-search-login-row {
        flex-wrap: wrap;
        gap: .55rem;
    }

    .bl-search-login-row .bl-top-search-area {
        max-width: min(890px, 100%) !important;
    }

    .bl-search-login-module.bl-top-login-area {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }
}

@media (max-width: 900px) {
    .bl-top-login-area.bl-top-menu-only .bl-top-login-inner {
        width: min(100% - 18px, 100%) !important;
        min-height: auto !important;
    }

    .bl-brand {
        margin: .95rem auto 1.20rem !important;
    }

    .bl-search-login-row {
        width: min(100% - 18px, 100%);
        flex-direction: column;
        align-items: stretch;
        gap: .55rem;
        margin: .25rem auto .58rem;
    }

    .bl-search-login-row .bl-top-search-area {
        width: 100% !important;
        max-width: 100% !important;
    }

    .bl-search-login-module.bl-top-login-area,
    .bl-search-login-module .bl-top-login-module {
        width: 100% !important;
        justify-content: center !important;
    }

    body.beerleague-site::before {
        height: 40rem !important;
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 1) 0,
            rgba(0, 0, 0, 1) 29rem,
            rgba(0, 0, 0, .66) 34rem,
            rgba(0, 0, 0, .20) 37.5rem,
            rgba(0, 0, 0, 0) 40rem) !important;
    }
}


/* v1.0.26 - move login/profile below logo and directly above server status modules.
   Top Menu remains centered at the very top. Login/Profile now sits between the
   neon logo and server status row, aligned to the right edge of the header/module width. */
.bl-brand {
    margin: 1.18rem auto .95rem !important;
}

.bl-logo-login-row.bl-top-login-area {
    width: min(1380px, calc(100% - 32px)) !important;
    margin: 0 auto .58rem !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 32 !important;
}

.bl-logo-login-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    min-height: 34px !important;
}

.bl-logo-login-row .bl-top-login-module {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.bl-logo-login-row.bl-top-login-area .mod-login,
.bl-logo-login-row.bl-top-login-area .login,
.bl-logo-login-row.bl-top-login-area form[id*="login"],
.bl-logo-login-row.bl-top-login-area form {
    padding: .30rem .46rem !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(0,0,0,.70), rgba(6,38,27,.66)) !important;
}

.bl-logo-login-row.bl-top-login-area .mod-login__userdata,
.bl-logo-login-row.bl-top-login-area .userdata,
.bl-logo-login-row.bl-top-login-area .login-greeting,
.bl-logo-login-row.bl-top-login-area .mod-login__greeting {
    font-size: .76rem !important;
}

.bl-logo-login-row.bl-top-login-area .bl-profile-btn,
.bl-logo-login-row.bl-top-login-area .bl-edit-profile-btn,
.bl-logo-login-row.bl-top-login-area .bl-logout-btn,
.bl-logo-login-row.bl-top-login-area button[type="submit"],
.bl-logo-login-row.bl-top-login-area input[type="submit"] {
    min-height: 30px !important;
    height: 30px !important;
    padding: .34rem .60rem !important;
    font-size: .66rem !important;
}

.bl-logo-login-row.bl-top-login-area input[type="text"],
.bl-logo-login-row.bl-top-login-area input[type="password"],
.bl-logo-login-row.bl-top-login-area input[type="email"],
.bl-logo-login-row.bl-top-login-area input[type="username"] {
    height: 30px !important;
    min-height: 30px !important;
    width: 130px !important;
    min-width: 118px !important;
    max-width: 145px !important;
    padding: .35rem .55rem !important;
    font-size: .74rem !important;
}

.bl-server-status-row {
    margin-top: .06rem !important;
    margin-bottom: .78rem !important;
}

.bl-search-login-row.bl-search-only-row {
    width: min(920px, calc(100% - 20px)) !important;
    display: flex !important;
    justify-content: center !important;
    gap: 0 !important;
    margin: .18rem auto .62rem !important;
}

.bl-search-login-row.bl-search-only-row .bl-top-search-area {
    flex: 0 1 890px !important;
    width: 100% !important;
    max-width: 890px !important;
    margin: 0 auto !important;
}

@media (max-width: 900px) {
    .bl-brand {
        margin: .95rem auto .80rem !important;
    }

    .bl-logo-login-row.bl-top-login-area {
        width: min(100% - 18px, 100%) !important;
        margin-bottom: .52rem !important;
    }

    .bl-logo-login-inner,
    .bl-logo-login-row .bl-top-login-module {
        justify-content: center !important;
        width: 100% !important;
    }

    .bl-search-login-row.bl-search-only-row {
        width: min(100% - 18px, 100%) !important;
        margin: .25rem auto .58rem !important;
    }
}


/* v1.0.27 - animated neon header map collage.
   After the neon sign has had time to kick on, the black header panel flips in
   individual CSS map-picture tiles built from the uploaded mappics.zip. */
:root {
    --bl-map-flip-start: 7.2s;
}

.bl-site-header {
    overflow: hidden !important;
}

.bl-site-header .bl-header-inner {
    position: relative !important;
    z-index: 5 !important;
}

.bl-header-map-collage {
    position: absolute !important;
    z-index: 1 !important;
    top: -0.20rem !important;
    left: 50% !important;
    width: min(1408px, calc(100% - 20px)) !important;
    height: 32.6rem !important;
    transform: translateX(-50%) translateZ(0) !important;
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    pointer-events: none !important;
    overflow: hidden !important;
    perspective: 950px !important;
    border-left: 1px solid rgba(0, 208, 132, .08) !important;
    border-right: 1px solid rgba(0, 208, 132, .08) !important;
    opacity: .92 !important;
}

.bl-header-map-collage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 24%, rgba(0, 208, 132, .10), transparent 25rem),
        radial-gradient(circle at 50% 47%, rgba(255, 173, 24, .08), transparent 20rem),
        linear-gradient(180deg,
            rgba(0,0,0,.72) 0%,
            rgba(0,0,0,.62) 36%,
            rgba(0,0,0,.72) 72%,
            rgba(0,0,0,.94) 100%);
}

.bl-header-map-collage::after {
    content: "";
    position: absolute;
    inset: -7% -2%;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(90deg, transparent 0%, rgba(0,208,132,.15) 46%, rgba(255,173,24,.14) 50%, rgba(0,208,132,.15) 54%, transparent 100%),
        radial-gradient(circle at 50% 18%, rgba(0, 208, 132, .20), transparent 21rem);
    mix-blend-mode: screen;
    animation: bl-header-neon-wake 4.6s ease-out var(--bl-map-flip-start) 1 both;
}

.bl-header-map-collage .bl-map-tile {
    position: relative;
    z-index: 1;
    display: block;
    min-width: 0;
    min-height: 0;
    background-image: url("../images/beerleague_header_maps_collage.jpg");
    background-size: 1200% 400%;
    background-position: var(--bgx) var(--bgy);
    background-repeat: no-repeat;
    opacity: 0;
    transform-origin: 50% 50%;
    transform: rotateY(92deg) scale(.965);
    filter: brightness(.64) contrast(1.10) saturate(1.08);
    backface-visibility: hidden;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.32);
    animation: bl-map-tile-flip .92s cubic-bezier(.18,.84,.28,1) calc(var(--bl-map-flip-start) + var(--d)) 1 forwards;
}

@keyframes bl-map-tile-flip {
    0% {
        opacity: 0;
        transform: rotateY(92deg) scale(.965);
        filter: brightness(.18) contrast(1.10) saturate(.75);
    }
    42% {
        opacity: .72;
        transform: rotateY(-12deg) 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(.62) contrast(1.10) saturate(1.08);
    }
}

@keyframes bl-header-neon-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); }
}

/* Let the logo/header glow feel connected to the tile flip without moving content. */
.bl-brand::after {
    content: "";
    position: absolute;
    inset: -2.2rem -5rem;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at 50% 50%, rgba(0, 208, 132, .24), transparent 54%),
                radial-gradient(circle at 50% 52%, rgba(255, 173, 24, .16), transparent 38%);
    filter: blur(10px);
    animation: bl-logo-header-glow 5.8s ease-in-out var(--bl-map-flip-start) infinite alternate;
}

@keyframes bl-logo-header-glow {
    0% { opacity: .12; transform: scale(.96); }
    100% { opacity: .42; transform: scale(1.05); }
}

@media (max-width: 900px) {
    .bl-header-map-collage {
        width: 100% !important;
        height: 36rem !important;
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bl-header-map-collage::after,
    .bl-header-map-collage .bl-map-tile,
    .bl-brand::after {
        animation: none !important;
    }

    .bl-header-map-collage .bl-map-tile {
        opacity: .32 !important;
        transform: none !important;
    }
}


/* v1.0.28 - top utility row refinement.
   Main menu is back on the upper-left with a small BEERLEAGUE mark before Home,
   login/profile controls are back at the upper-right, and the neon logo gets more
   breathing room below the top row. */
.bl-top-utility-area {
    position: relative !important;
    z-index: 60 !important;
    width: min(1408px, calc(100% - 20px)) !important;
    margin: 0 auto !important;
    padding: .38rem 0 .18rem !important;
}

.bl-top-utility-inner {
    width: 100% !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .75rem !important;
    margin: 0 auto !important;
}

.bl-top-menu-cluster {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .55rem !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    padding-left: clamp(.35rem, 1vw, .9rem) !important;
}

.bl-top-mini-logo {
    flex: 0 0 auto !important;
    width: 38px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(0, 208, 132, .22) !important;
    border-radius: 5px !important;
    background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(3,32,23,.62)) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.06), 0 7px 18px rgba(0,0,0,.25) !important;
    opacity: .95 !important;
}

.bl-top-mini-logo img {
    display: block !important;
    width: 31px !important;
    max-width: 31px !important;
    height: auto !important;
    filter: brightness(1.08) saturate(1.08) drop-shadow(0 0 5px rgba(0,208,132,.18)) !important;
}

.bl-top-utility-area .bl-top-menu,
.bl-top-utility-area .bl-top-menu-utility {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: .18rem !important;
    flex: 0 1 auto !important;
    text-align: left !important;
    border-radius: 5px !important;
    background: linear-gradient(180deg, rgba(0,0,0,.76), rgba(2,20,14,.72)) !important;
}

.bl-top-utility-area .bl-top-menu ul,
.bl-top-utility-area .bl-top-menu-utility ul,
.bl-top-utility-area .bl-top-menu-utility .mod-menu,
.bl-top-utility-area .bl-top-menu-utility .navbar-nav,
.bl-top-utility-area .bl-top-menu-utility .nav {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: .30rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.bl-top-utility-area .bl-top-menu li {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bl-top-utility-area .bl-top-menu a,
.bl-top-utility-area .bl-top-menu .nav-link,
.bl-top-utility-area .bl-top-menu-utility a,
.bl-top-utility-area .bl-top-menu-utility .nav-link {
    min-height: 29px !important;
    padding: .38rem .62rem !important;
    font-size: .72rem !important;
    letter-spacing: .035em !important;
    white-space: nowrap !important;
}

.bl-top-login-module-utility {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    max-width: 49% !important;
    margin-left: auto !important;
    padding-right: clamp(.35rem, 1vw, .9rem) !important;
}

.bl-top-login-module-utility .moduletable,
.bl-top-login-module-utility .card,
.bl-top-login-module-utility .well {
    margin: 0 !important;
}

.bl-top-login-module-utility .mod-login,
.bl-top-login-module-utility .login,
.bl-top-login-module-utility form[id*="login"],
.bl-top-login-module-utility form,
.bl-top-login-module-utility .bl-login-logout {
    padding: .26rem .38rem !important;
    border-radius: 5px !important;
    background: linear-gradient(180deg, rgba(0,0,0,.74), rgba(6,38,27,.66)) !important;
}

.bl-top-login-module-utility .bl-login-greeting,
.bl-top-login-module-utility .login-greeting,
.bl-top-login-module-utility .mod-login__greeting {
    font-size: .74rem !important;
}

/* Remove the old below-logo login placement from the v1.0.26 overrides. */
.bl-logo-login-row.bl-top-login-area {
    display: none !important;
}

/* Add a little more room between the top row and the centered neon logo. */
.bl-site-header {
    padding-top: .82rem !important;
}

.bl-brand {
    margin: 1.40rem auto 1.02rem !important;
}

.bl-header-map-collage {
    top: .10rem !important;
    height: 32.9rem !important;
}

body.beerleague-site::before {
    height: 33.8rem !important;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 1) 0,
        rgba(0, 0, 0, 1) 25.8rem,
        rgba(0, 0, 0, .80) 28.4rem,
        rgba(0, 0, 0, .36) 31.1rem,
        rgba(0, 0, 0, 0) 33.8rem) !important;
}

@media (max-width: 1160px) {
    .bl-top-utility-inner {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    .bl-top-menu-cluster {
        width: 100% !important;
        flex: 1 1 100% !important;
        justify-content: center !important;
        padding-left: 0 !important;
    }
    .bl-top-login-module-utility {
        max-width: 100% !important;
        justify-content: center !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 900px) {
    .bl-top-utility-area {
        width: min(100% - 18px, 100%) !important;
        padding-top: .32rem !important;
    }
    .bl-top-menu-cluster {
        gap: .42rem !important;
    }
    .bl-top-mini-logo {
        width: 34px !important;
        height: 30px !important;
    }
    .bl-top-mini-logo img {
        width: 28px !important;
        max-width: 28px !important;
    }
    .bl-brand {
        margin: 1.05rem auto .88rem !important;
    }
    .bl-site-header {
        padding-top: .48rem !important;
    }
    body.beerleague-site::before {
        height: 40rem !important;
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 1) 0,
            rgba(0, 0, 0, 1) 29rem,
            rgba(0, 0, 0, .66) 34rem,
            rgba(0, 0, 0, .20) 37.5rem,
            rgba(0, 0, 0, 0) 40rem) !important;
    }
}


/* v1.0.29 - slow random map-tile glow and extra logo breathing room.
   After all CSS map tiles finish flipping in, each tile gets its own soft delayed
   glow pass so the header feels like the neon sign is waking the map collage up. */
.bl-header-map-collage .bl-map-tile {
    overflow: hidden !important;
}

.bl-header-map-collage .bl-map-tile::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background-image:
        radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(0, 208, 132, .30), transparent 62%),
        linear-gradient(135deg, rgba(255, 173, 24, .16), rgba(0, 208, 132, .08) 46%, transparent 74%),
        url("../images/beerleague_header_maps_collage.jpg");
    background-size: 100% 100%, 100% 100%, 1200% 400%;
    background-position: center, center, var(--bgx) var(--bgy);
    background-repeat: no-repeat;
    mix-blend-mode: screen;
    filter: brightness(1.18) contrast(1.12) saturate(1.34);
    box-shadow: inset 0 0 0 1px rgba(0, 208, 132, 0), inset 0 0 18px rgba(255, 173, 24, 0);
    animation: bl-map-tile-soft-glow var(--gs, 19000ms) ease-in-out calc(var(--bl-map-flip-start) + 4.2s + var(--g, 0ms)) infinite;
}

@keyframes bl-map-tile-soft-glow {
    0%, 18%, 58%, 100% {
        opacity: 0;
        filter: brightness(1.10) contrast(1.10) saturate(1.16);
        box-shadow: inset 0 0 0 1px rgba(0, 208, 132, 0), inset 0 0 18px rgba(255, 173, 24, 0);
    }
    31% {
        opacity: calc(var(--gp, .26) * .55);
        filter: brightness(1.28) contrast(1.12) saturate(1.28);
    }
    41% {
        opacity: var(--gp, .26);
        filter: brightness(1.58) contrast(1.18) saturate(1.45);
        box-shadow: inset 0 0 0 1px rgba(0, 208, 132, .18), inset 0 0 24px rgba(255, 173, 24, .10), 0 0 18px rgba(0, 208, 132, .10);
    }
    50% {
        opacity: calc(var(--gp, .26) * .38);
        filter: brightness(1.24) contrast(1.12) saturate(1.25);
    }
}

/* More air around the neon logo so the top menu, sign, and server tiles do not feel cramped. */
.bl-site-header {
    padding-top: 1.08rem !important;
}

.bl-brand {
    margin: 2.02rem auto 1.58rem !important;
}

.bl-server-status-row {
    margin-top: .34rem !important;
}

/* Make the small BEERLEAGUE logo beside Home roughly twice the prior size. */
.bl-top-mini-logo {
    width: 76px !important;
    height: 64px !important;
    border-radius: 6px !important;
}

.bl-top-mini-logo img {
    width: 62px !important;
    max-width: 62px !important;
}

.bl-top-menu-cluster {
    gap: .72rem !important;
}

.bl-header-map-collage {
    top: .06rem !important;
    height: 34.65rem !important;
}

body.beerleague-site::before {
    height: 35.7rem !important;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 1) 0,
        rgba(0, 0, 0, 1) 27.15rem,
        rgba(0, 0, 0, .82) 30.0rem,
        rgba(0, 0, 0, .38) 33.05rem,
        rgba(0, 0, 0, 0) 35.7rem) !important;
}

@media (max-width: 900px) {
    .bl-brand {
        margin: 1.42rem auto 1.18rem !important;
    }
    .bl-site-header {
        padding-top: .62rem !important;
    }
    .bl-server-status-row {
        margin-top: .18rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bl-header-map-collage .bl-map-tile::after {
        animation: none !important;
        opacity: 0 !important;
    }
}


/* v1.0.30 - logo breathing room + visible random map-tile light-up.
   Keeps the neon glow tight to the BEERLEAGUE logo so it does not sit behind the
   top menu or server tiles, then starts random tile light pulses after the collage loads. */
:root {
    --bl-map-light-start: calc(var(--bl-map-flip-start) + 4.35s);
}

/* More clear space above and below the main neon sign. */
.bl-site-header {
    padding-top: 1.35rem !important;
    padding-bottom: .92rem !important;
}

.bl-brand {
    margin: 3.00rem auto 2.34rem !important;
}

/* Keep the neon halo close to the logo only. */
.bl-brand::before {
    inset: -11% !important;
    filter: blur(9px) brightness(1.14) saturate(1.25) !important;
    animation:
        bl-neon-halo-start-tight 3.45s ease-out 1 both,
        bl-neon-halo-pulse-tight 4.8s ease-in-out 3.45s infinite !important;
}

.bl-brand::after {
    inset: -.55rem -1.15rem !important;
    filter: blur(7px) !important;
    background:
        radial-gradient(circle at 50% 50%, rgba(0, 208, 132, .18), transparent 56%),
        radial-gradient(circle at 50% 52%, rgba(255, 173, 24, .12), transparent 42%) !important;
    animation: bl-logo-header-glow-tight 5.8s ease-in-out var(--bl-map-flip-start) infinite alternate !important;
}

@keyframes bl-neon-halo-start-tight {
    0%, 8%, 11%, 16.5% { opacity: .015; }
    9% { opacity: .12; }
    14% { opacity: .18; }
    20% { opacity: .24; }
    25%, 100% { opacity: .16; }
}

@keyframes bl-neon-halo-pulse-tight {
    0%, 100% { opacity: .13; filter: blur(8px) brightness(1.10) saturate(1.20); }
    50% { opacity: .22; filter: blur(10px) brightness(1.22) saturate(1.35); }
}

@keyframes bl-logo-header-glow-tight {
    0% { opacity: .06; transform: scale(.98); }
    100% { opacity: .20; transform: scale(1.02); }
}

/* Header collage needs to grow with the added sign spacing. */
.bl-header-map-collage {
    top: .06rem !important;
    height: 38.85rem !important;
}

body.beerleague-site::before {
    height: 39.9rem !important;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 1) 0,
        rgba(0, 0, 0, 1) 30.85rem,
        rgba(0, 0, 0, .82) 34.0rem,
        rgba(0, 0, 0, .38) 37.1rem,
        rgba(0, 0, 0, 0) 39.9rem) !important;
}

/* Make tile light-up visible by animating the actual tile, not only a dim overlay. */
.bl-header-map-collage .bl-map-tile {
    animation:
        bl-map-tile-flip .92s cubic-bezier(.18,.84,.28,1) calc(var(--bl-map-flip-start) + var(--d)) 1 forwards,
        bl-map-tile-random-light var(--ls, 16000ms) ease-in-out calc(var(--bl-map-light-start) + var(--lg, 0ms)) infinite !important;
    will-change: filter, opacity, box-shadow;
}

.bl-header-map-collage .bl-map-tile::after {
    z-index: 2;
    background-image:
        radial-gradient(circle at var(--lx, 50%) var(--ly, 50%), rgba(0, 208, 132, .42), transparent 58%),
        linear-gradient(135deg, rgba(255, 173, 24, .20), rgba(0, 208, 132, .12) 48%, transparent 76%),
        url("../images/beerleague_header_maps_collage.jpg") !important;
    animation: bl-map-tile-soft-glow-visible var(--ls, 16000ms) ease-in-out calc(var(--bl-map-light-start) + var(--lg, 0ms)) infinite !important;
}

@keyframes bl-map-tile-random-light {
    0%, 8%, 34%, 55%, 100% {
        opacity: .48;
        filter: brightness(.62) contrast(1.10) saturate(1.08);
        box-shadow: inset 0 0 0 1px rgba(0,0,0,.32);
    }
    13%, 62% {
        opacity: .56;
        filter: brightness(.84) contrast(1.14) saturate(1.16);
    }
    20%, 70% {
        opacity: calc(.60 + (var(--lp, .62) * .24));
        filter: brightness(1.32) contrast(1.20) saturate(1.42);
        box-shadow:
            inset 0 0 0 1px rgba(0, 208, 132, .22),
            inset 0 0 26px rgba(255, 173, 24, .15),
            0 0 22px rgba(0, 208, 132, .16);
    }
    27%, 78% {
        opacity: .58;
        filter: brightness(.88) contrast(1.14) saturate(1.18);
    }
}

@keyframes bl-map-tile-soft-glow-visible {
    0%, 9%, 35%, 56%, 100% {
        opacity: 0;
        filter: brightness(1.08) contrast(1.08) saturate(1.10);
        box-shadow: inset 0 0 0 1px rgba(0, 208, 132, 0), inset 0 0 18px rgba(255, 173, 24, 0);
    }
    15%, 64% {
        opacity: calc(var(--lp, .62) * .28);
        filter: brightness(1.28) contrast(1.12) saturate(1.30);
    }
    22%, 72% {
        opacity: calc(var(--lp, .62) * .48);
        filter: brightness(1.62) contrast(1.18) saturate(1.52);
        box-shadow: inset 0 0 0 1px rgba(0, 208, 132, .22), inset 0 0 28px rgba(255, 173, 24, .12), 0 0 18px rgba(0, 208, 132, .12);
    }
    29%, 83% {
        opacity: calc(var(--lp, .62) * .20);
        filter: brightness(1.22) contrast(1.12) saturate(1.26);
    }
}

@media (max-width: 1160px) {
    .bl-brand {
        margin: 2.35rem auto 1.85rem !important;
    }
    .bl-header-map-collage {
        height: 40.2rem !important;
    }
}

@media (max-width: 900px) {
    .bl-site-header {
        padding-top: .76rem !important;
        padding-bottom: .70rem !important;
    }
    .bl-brand {
        margin: 1.72rem auto 1.42rem !important;
    }
    .bl-brand::before {
        inset: -9% !important;
    }
    .bl-brand::after {
        inset: -.35rem -.8rem !important;
    }
    .bl-header-map-collage {
        height: 42rem !important;
    }
    body.beerleague-site::before {
        height: 43.2rem !important;
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 1) 0,
            rgba(0, 0, 0, 1) 33rem,
            rgba(0, 0, 0, .66) 38rem,
            rgba(0, 0, 0, .20) 41rem,
            rgba(0, 0, 0, 0) 43.2rem) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bl-brand::before,
    .bl-brand::after,
    .bl-header-map-collage .bl-map-tile,
    .bl-header-map-collage .bl-map-tile::after {
        animation: none !important;
    }
    .bl-header-map-collage .bl-map-tile {
        opacity: .48 !important;
        transform: none !important;
        filter: brightness(.62) contrast(1.10) saturate(1.08) !important;
    }
    .bl-header-map-collage .bl-map-tile::after {
        opacity: 0 !important;
    }
}


/* v1.0.31 - optional home-page-only neon header.
   Template option: Neon Logo Display. When set to Home Page Only, inner pages skip
   the large neon logo/map-collage hero area and the server/search/content area moves up. */
body.bl-neon-logo-hidden .bl-site-header {
    padding-top: .38rem !important;
    padding-bottom: .52rem !important;
}

body.bl-neon-logo-hidden .bl-header-inner {
    padding-top: 0 !important;
}

body.bl-neon-logo-hidden .bl-server-status-row {
    margin-top: .30rem !important;
    margin-bottom: .42rem !important;
}

body.bl-neon-logo-hidden .bl-top-search-area {
    margin-top: .32rem !important;
}

body.bl-neon-logo-hidden .bl-beerleague-nav-area {
    margin-bottom: .45rem !important;
}

body.bl-neon-logo-hidden::before {
    height: 27.6rem !important;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 1) 0,
        rgba(0, 0, 0, 1) 18.2rem,
        rgba(0, 0, 0, .78) 21.9rem,
        rgba(0, 0, 0, .34) 25.0rem,
        rgba(0, 0, 0, 0) 27.6rem) !important;
}

@media (max-width: 900px) {
    body.bl-neon-logo-hidden .bl-site-header {
        padding-top: .30rem !important;
        padding-bottom: .45rem !important;
    }

    body.bl-neon-logo-hidden .bl-server-status-row {
        margin-top: .22rem !important;
    }

    body.bl-neon-logo-hidden::before {
        height: 31rem !important;
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 1) 0,
            rgba(0, 0, 0, 1) 21.5rem,
            rgba(0, 0, 0, .68) 25.8rem,
            rgba(0, 0, 0, .22) 29rem,
            rgba(0, 0, 0, 0) 31rem) !important;
    }
}


/* v1.0.32 - home-page-only hero polish + shorter map animation fade.
   Adds a centered logo stage so the neon sign has even air above and below it.
   The animated map collage now fades out near the top side of the server-status row
   instead of carrying visibly below the server tiles. */
.bl-neon-logo-stage {
    position: relative !important;
    z-index: 6 !important;
    min-height: clamp(17.75rem, 25vw, 23.75rem) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(2.00rem, 3vw, 2.90rem) 0 clamp(2.20rem, 3.2vw, 3.10rem) !important;
    box-sizing: border-box !important;
}

.bl-neon-logo-stage .bl-brand {
    margin: 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.bl-neon-logo-stage .bl-brand img {
    width: min(252px, 46vw) !important;
    max-width: 252px !important;
    height: auto !important;
}

/* Keep the logo glow tight and centered inside the logo stage. */
.bl-neon-logo-stage .bl-brand::before {
    inset: -10% !important;
    filter: blur(8px) brightness(1.12) saturate(1.22) !important;
}

.bl-neon-logo-stage .bl-brand::after {
    inset: -.42rem -1.00rem !important;
    filter: blur(6px) !important;
    opacity: .12;
}

/* The map animation should be a header treatment, not a full-height background. */
.bl-header-map-collage {
    top: 0 !important;
    height: clamp(24.2rem, 31vw, 30.2rem) !important;
    -webkit-mask-image: linear-gradient(180deg,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 66%,
        rgba(0,0,0,.74) 78%,
        rgba(0,0,0,.30) 91%,
        rgba(0,0,0,0) 100%) !important;
    mask-image: linear-gradient(180deg,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 66%,
        rgba(0,0,0,.74) 78%,
        rgba(0,0,0,.30) 91%,
        rgba(0,0,0,0) 100%) !important;
}

.bl-header-map-collage::before {
    background:
        radial-gradient(circle at 50% 30%, rgba(0, 208, 132, .10), transparent 22rem),
        radial-gradient(circle at 50% 48%, rgba(255, 173, 24, .07), transparent 18rem),
        linear-gradient(180deg,
            rgba(0,0,0,.74) 0%,
            rgba(0,0,0,.58) 40%,
            rgba(0,0,0,.70) 70%,
            rgba(0,0,0,.96) 100%) !important;
}

/* Let the center black panel start fading sooner so it does not hang below the server row. */
body.beerleague-site::before {
    height: 31.4rem !important;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 1) 0,
        rgba(0, 0, 0, 1) 24.0rem,
        rgba(0, 0, 0, .78) 26.2rem,
        rgba(0, 0, 0, .34) 29.1rem,
        rgba(0, 0, 0, 0) 31.4rem) !important;
}

.bl-server-status-row {
    position: relative !important;
    z-index: 8 !important;
    margin-top: .08rem !important;
}

/* Stronger after-load tile glow: varied timings, brighter pulses, still slow and tasteful. */
:root {
    --bl-map-light-start: calc(var(--bl-map-flip-start) + 3.65s);
}

.bl-header-map-collage .bl-map-tile {
    animation:
        bl-map-tile-flip .92s cubic-bezier(.18,.84,.28,1) calc(var(--bl-map-flip-start) + var(--d)) 1 forwards,
        bl-map-tile-random-light-v1047 var(--ls, 11200ms) ease-in-out calc(var(--bl-map-light-start) + var(--lg, 0ms)) infinite !important;
}

.bl-header-map-collage .bl-map-tile::after {
    animation: bl-map-tile-soft-glow-v1047 var(--ls, 11200ms) ease-in-out calc(var(--bl-map-light-start) + var(--lg, 0ms)) infinite !important;
}

.bl-header-map-collage .bl-map-tile:nth-child(6n+1) { --ls: 10400ms !important; --lg: 0ms !important; --lp: .94 !important; }
.bl-header-map-collage .bl-map-tile:nth-child(6n+2) { --ls: 11800ms !important; --lg: 1400ms !important; --lp: .84 !important; }
.bl-header-map-collage .bl-map-tile:nth-child(6n+3) { --ls: 9600ms !important; --lg: 2800ms !important; --lp: .90 !important; }
.bl-header-map-collage .bl-map-tile:nth-child(6n+4) { --ls: 13200ms !important; --lg: 700ms !important; --lp: .78 !important; }
.bl-header-map-collage .bl-map-tile:nth-child(6n+5) { --ls: 10900ms !important; --lg: 3600ms !important; --lp: .88 !important; }
.bl-header-map-collage .bl-map-tile:nth-child(6n+6) { --ls: 12400ms !important; --lg: 2100ms !important; --lp: .82 !important; }

@keyframes bl-map-tile-random-light-v1047 {
    0%, 12%, 40%, 66%, 100% {
        opacity: .48;
        filter: brightness(.62) contrast(1.10) saturate(1.08);
        box-shadow: inset 0 0 0 1px rgba(0,0,0,.32);
    }
    19%, 73% {
        opacity: .62;
        filter: brightness(.98) contrast(1.15) saturate(1.20);
    }
    26%, 80% {
        opacity: calc(.64 + (var(--lp, .86) * .20));
        filter: brightness(1.72) contrast(1.22) saturate(1.55);
        box-shadow:
            inset 0 0 0 1px rgba(0, 208, 132, .28),
            inset 0 0 30px rgba(255, 173, 24, .18),
            0 0 28px rgba(0, 208, 132, .20);
    }
    33%, 88% {
        opacity: .58;
        filter: brightness(.90) contrast(1.14) saturate(1.18);
    }
}

@keyframes bl-map-tile-soft-glow-v1047 {
    0%, 13%, 42%, 67%, 100% {
        opacity: 0;
        filter: brightness(1.06) contrast(1.08) saturate(1.10);
        box-shadow: inset 0 0 0 1px rgba(0, 208, 132, 0), inset 0 0 18px rgba(255, 173, 24, 0);
    }
    20%, 74% {
        opacity: calc(var(--lp, .86) * .36);
        filter: brightness(1.38) contrast(1.14) saturate(1.34);
    }
    27%, 81% {
        opacity: calc(var(--lp, .86) * .62);
        filter: brightness(1.85) contrast(1.20) saturate(1.62);
        box-shadow: inset 0 0 0 1px rgba(0, 208, 132, .26), inset 0 0 34px rgba(255, 173, 24, .14), 0 0 24px rgba(0, 208, 132, .18);
    }
    34%, 89% {
        opacity: calc(var(--lp, .86) * .22);
        filter: brightness(1.25) contrast(1.12) saturate(1.28);
    }
}

/* Inner pages: when Home Page Only is selected, there is no hero stage, and everything moves up. */
body.bl-neon-logo-hidden .bl-neon-logo-stage,
body.bl-neon-logo-hidden .bl-header-map-collage {
    display: none !important;
}

body.bl-neon-logo-hidden .bl-site-header {
    padding-top: .26rem !important;
    padding-bottom: .44rem !important;
}

body.bl-neon-logo-hidden .bl-server-status-row {
    margin-top: .10rem !important;
}

@media (max-width: 1160px) {
    .bl-neon-logo-stage {
        min-height: clamp(16.25rem, 30vw, 22.25rem) !important;
        padding-top: 1.80rem !important;
        padding-bottom: 2.40rem !important;
    }

    .bl-header-map-collage {
        height: 30.8rem !important;
    }
}

@media (max-width: 900px) {
    .bl-neon-logo-stage {
        min-height: 16.75rem !important;
        padding: 1.45rem 0 1.95rem !important;
    }

    .bl-neon-logo-stage .bl-brand img {
        width: min(235px, 68vw) !important;
        max-width: 235px !important;
    }

    .bl-header-map-collage {
        height: 31.4rem !important;
        -webkit-mask-image: linear-gradient(180deg,
            rgba(0,0,0,1) 0%,
            rgba(0,0,0,1) 62%,
            rgba(0,0,0,.70) 78%,
            rgba(0,0,0,.22) 92%,
            rgba(0,0,0,0) 100%) !important;
        mask-image: linear-gradient(180deg,
            rgba(0,0,0,1) 0%,
            rgba(0,0,0,1) 62%,
            rgba(0,0,0,.70) 78%,
            rgba(0,0,0,.22) 92%,
            rgba(0,0,0,0) 100%) !important;
    }

    body.beerleague-site::before {
        height: 34.4rem !important;
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 1) 0,
            rgba(0, 0, 0, 1) 25.6rem,
            rgba(0, 0, 0, .66) 29.2rem,
            rgba(0, 0, 0, .20) 32.4rem,
            rgba(0, 0, 0, 0) 34.4rem) !important;
    }

    body.bl-neon-logo-hidden::before {
        height: 29rem !important;
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 1) 0,
            rgba(0, 0, 0, 1) 20.2rem,
            rgba(0, 0, 0, .62) 24.2rem,
            rgba(0, 0, 0, .18) 27.2rem,
            rgba(0, 0, 0, 0) 29rem) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bl-header-map-collage .bl-map-tile,
    .bl-header-map-collage .bl-map-tile::after {
        animation: none !important;
    }
}


/* v1.0.33 - quicker neon-to-map animation handoff.
   The neon logo still gets its power-on moment, but the map tiles now start
   flipping almost immediately after the sign lights. The random tile glow also
   begins shortly after the flip-in finishes instead of waiting several extra seconds. */
:root {
    --bl-map-flip-start: 3.60s !important;
    --bl-map-light-start: calc(var(--bl-map-flip-start) + 2.75s) !important;
}

.bl-header-map-collage::after {
    animation: bl-header-neon-wake 3.35s ease-out var(--bl-map-flip-start) 1 both !important;
}

.bl-header-map-collage .bl-map-tile {
    animation:
        bl-map-tile-flip .84s cubic-bezier(.18,.84,.28,1) calc(var(--bl-map-flip-start) + var(--d)) 1 forwards,
        bl-map-tile-random-light-v1048 var(--ls, 9200ms) ease-in-out calc(var(--bl-map-light-start) + var(--lg, 0ms)) infinite !important;
}

.bl-header-map-collage .bl-map-tile::after {
    animation: bl-map-tile-soft-glow-v1048 var(--ls, 9200ms) ease-in-out calc(var(--bl-map-light-start) + var(--lg, 0ms)) infinite !important;
}

.bl-header-map-collage .bl-map-tile:nth-child(6n+1) { --ls: 8800ms !important; --lg: 0ms !important; --lp: .94 !important; }
.bl-header-map-collage .bl-map-tile:nth-child(6n+2) { --ls: 9900ms !important; --lg: 520ms !important; --lp: .84 !important; }
.bl-header-map-collage .bl-map-tile:nth-child(6n+3) { --ls: 8400ms !important; --lg: 1120ms !important; --lp: .90 !important; }
.bl-header-map-collage .bl-map-tile:nth-child(6n+4) { --ls: 10800ms !important; --lg: 260ms !important; --lp: .78 !important; }
.bl-header-map-collage .bl-map-tile:nth-child(6n+5) { --ls: 9300ms !important; --lg: 1440ms !important; --lp: .88 !important; }
.bl-header-map-collage .bl-map-tile:nth-child(6n+6) { --ls: 10200ms !important; --lg: 800ms !important; --lp: .82 !important; }

@keyframes bl-map-tile-random-light-v1048 {
    0%, 4%, 28%, 58%, 100% {
        opacity: .48;
        filter: brightness(.62) contrast(1.10) saturate(1.08);
        box-shadow: inset 0 0 0 1px rgba(0,0,0,.32);
    }
    8%, 38%, 68% {
        opacity: .62;
        filter: brightness(1.02) contrast(1.15) saturate(1.22);
    }
    14%, 44%, 74% {
        opacity: calc(.64 + (var(--lp, .86) * .22));
        filter: brightness(1.78) contrast(1.22) saturate(1.58);
        box-shadow:
            inset 0 0 0 1px rgba(0, 208, 132, .30),
            inset 0 0 30px rgba(255, 173, 24, .18),
            0 0 30px rgba(0, 208, 132, .22);
    }
    20%, 50%, 82% {
        opacity: .58;
        filter: brightness(.92) contrast(1.14) saturate(1.18);
    }
}

@keyframes bl-map-tile-soft-glow-v1048 {
    0%, 4%, 29%, 59%, 100% {
        opacity: 0;
        filter: brightness(1.06) contrast(1.08) saturate(1.10);
        box-shadow: inset 0 0 0 1px rgba(0, 208, 132, 0), inset 0 0 18px rgba(255, 173, 24, 0);
    }
    9%, 39%, 69% {
        opacity: calc(var(--lp, .86) * .38);
        filter: brightness(1.42) contrast(1.14) saturate(1.36);
    }
    15%, 45%, 75% {
        opacity: calc(var(--lp, .86) * .64);
        filter: brightness(1.88) contrast(1.20) saturate(1.64);
        box-shadow: inset 0 0 0 1px rgba(0, 208, 132, .28), inset 0 0 34px rgba(255, 173, 24, .15), 0 0 26px rgba(0, 208, 132, .20);
    }
    21%, 51%, 83% {
        opacity: calc(var(--lp, .86) * .23);
        filter: brightness(1.25) contrast(1.12) saturate(1.28);
    }
}


/* v1.0.34 - neon logo vertical centering.
   The logo stage sits below the top utility row, so the visible logo could look a
   touch low inside the full animated map header. This gently nudges the sign up
   so it visually centers between the top menu and the server-status modules. */
:root {
    --bl-neon-logo-vertical-nudge: clamp(-1.55rem, -1.35vw, -1.05rem);
}

.bl-neon-logo-stage .bl-brand {
    transform: translateY(var(--bl-neon-logo-vertical-nudge)) translateZ(0) !important;
}

.bl-neon-logo-stage .bl-brand::before,
.bl-neon-logo-stage .bl-brand::after {
    transform-origin: center center !important;
}

@media (max-width: 900px) {
    :root {
        --bl-neon-logo-vertical-nudge: -.72rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bl-neon-logo-stage .bl-brand {
        transform: translateY(var(--bl-neon-logo-vertical-nudge)) !important;
    }
}


/* v1.0.35 - make the BEERLEAGUE mark the Home button.
   The small logo at the far-left of the top utility row now acts as Home,
   while the duplicate Home menu item is hidden so the rest of the menu shifts left. */
.bl-home-logo-button {
    position: relative !important;
    color: transparent !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease, filter .18s ease !important;
}

.bl-home-logo-button:hover,
.bl-home-logo-button:focus-visible,
body.bl-is-home .bl-home-logo-button {
    transform: translateY(-1px) !important;
    border-color: rgba(255, 181, 0, .82) !important;
    background: linear-gradient(180deg, rgba(255,181,0,.22), rgba(3,32,23,.74)) !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.11),
        0 0 0 1px rgba(255,181,0,.20),
        0 0 16px rgba(0,208,132,.28),
        0 8px 20px rgba(0,0,0,.30) !important;
    filter: brightness(1.08) saturate(1.12) !important;
}

.bl-home-logo-button:focus-visible {
    outline: 2px solid rgba(255, 181, 0, .90) !important;
    outline-offset: 3px !important;
}

.bl-top-menu-home-is-logo ul > li:first-child,
.bl-top-menu-home-is-logo .mod-menu > li:first-child,
.bl-top-menu-home-is-logo .nav > li:first-child {
    display: none !important;
}

.bl-top-menu-cluster {
    gap: .58rem !important;
}

/* Keep the larger logo button readable while making the menu feel connected to it. */
.bl-top-mini-logo.bl-home-logo-button {
    width: 76px !important;
    height: 64px !important;
    min-width: 76px !important;
}

.bl-top-mini-logo.bl-home-logo-button img {
    width: 62px !important;
    max-width: 62px !important;
}

@media (max-width: 900px) {
    .bl-top-mini-logo.bl-home-logo-button {
        width: 58px !important;
        height: 50px !important;
        min-width: 58px !important;
    }
    .bl-top-mini-logo.bl-home-logo-button img {
        width: 48px !important;
        max-width: 48px !important;
    }
    .bl-top-menu-cluster {
        gap: .44rem !important;
    }
}


/* v1.0.36 - richer Joomla article/body presentation.
   Spruces up normal Joomla articles, category/blog pages, and plain content areas
   so the body content matches the polished BEERLEAGUE server/status styling. */
.bl-content-card {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    border: 1px solid rgba(0, 208, 132, .36) !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(0, 208, 132, .22), transparent 18rem),
        radial-gradient(circle at 92% 6%, rgba(255, 173, 24, .16), transparent 17rem),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(180deg, rgba(5, 42, 30, .94), rgba(2, 16, 12, .94) 42%, rgba(1, 8, 6, .96)) !important;
    background-size: auto, auto, 34px 34px, 34px 34px, auto !important;
    box-shadow:
        0 18px 52px rgba(0,0,0,.42),
        inset 0 1px rgba(255,255,255,.06),
        inset 5px 0 rgba(0, 208, 132, .82) !important;
}

.bl-content-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
    background:
        linear-gradient(90deg, rgba(255,173,24,.95) 0 3px, transparent 3px 100%),
        linear-gradient(180deg, rgba(0,208,132,.10), transparent 9rem) !important;
    opacity: .92 !important;
}

.bl-content-card::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
    background: linear-gradient(135deg, transparent 0 74%, rgba(0,208,132,.08) 74%, transparent 86%) !important;
    mix-blend-mode: screen !important;
    opacity: .46 !important;
}

/* Do not over-frame the custom BEERLEAGUE stats component; it already has its own cards. */
.bl-content-card:has(.bl-stats-shell) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
}
.bl-content-card:has(.bl-stats-shell)::before,
.bl-content-card:has(.bl-stats-shell)::after {
    display: none !important;
}

.com-content-article,
.item-page,
.blog,
.com-content-category-blog,
.category-list,
.categories-list,
.archive,
.tag-category {
    position: relative !important;
}

.com-content-article > *,
.item-page > *,
.blog > *,
.com-content-category-blog > *,
.category-list > *,
.categories-list > *,
.archive > *,
.tag-category > * {
    position: relative !important;
    z-index: 1 !important;
}

.item-page .page-header,
.com-content-article .page-header,
.blog .page-header,
.com-content-category-blog .page-header,
.category-list .page-header,
.categories-list .page-header,
.archive .page-header,
.tag-category .page-header {
    position: relative !important;
    margin: 0 0 1.05rem !important;
    padding: .92rem 1rem .88rem 1.05rem !important;
    border: 1px solid rgba(0, 208, 132, .34) !important;
    border-left: 4px solid var(--bl-logo-orange-bright) !important;
    border-radius: 9px !important;
    background:
        radial-gradient(circle at 88% 15%, rgba(255, 173, 24, .20), transparent 15rem),
        linear-gradient(135deg, rgba(4, 90, 62, .56), rgba(3, 25, 18, .72)) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.06), 0 12px 30px rgba(0,0,0,.22) !important;
}

.item-page .page-header::before,
.com-content-article .page-header::before,
.blog .page-header::before,
.com-content-category-blog .page-header::before,
.category-list .page-header::before,
.categories-list .page-header::before,
.archive .page-header::before,
.tag-category .page-header::before {
    content: "● BEERLEAGUE" !important;
    display: block !important;
    margin: 0 0 .25rem !important;
    color: var(--bl-logo-orange-bright) !important;
    font-size: .70rem !important;
    font-weight: 950 !important;
    letter-spacing: .16em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 12px rgba(255, 173, 24, .24) !important;
}

.item-page .page-header h1,
.item-page .page-header h2,
.com-content-article .page-header h1,
.com-content-article .page-header h2,
.blog .page-header h1,
.blog .page-header h2,
.com-content-category-blog .page-header h1,
.com-content-category-blog .page-header h2,
.category-list .page-header h1,
.categories-list .page-header h1,
.archive .page-header h1,
.tag-category .page-header h1 {
    margin: 0 !important;
    font-size: clamp(2rem, 4.2vw, 3.25rem) !important;
    line-height: .96 !important;
    letter-spacing: .12em !important;
    color: #fff !important;
    text-transform: uppercase !important;
    text-shadow:
        0 2px 0 rgba(0,0,0,.88),
        0 0 22px rgba(0,208,132,.22) !important;
}

/* Some Joomla articles place the title directly in the article body instead of page-header. */
.item-page > h1:first-child,
.com-content-article > h1:first-child,
.bl-content-card > h1:first-child {
    margin: 0 0 .9rem !important;
    padding: .90rem 1rem .86rem 1.05rem !important;
    border: 1px solid rgba(0, 208, 132, .34) !important;
    border-left: 4px solid var(--bl-logo-orange-bright) !important;
    border-radius: 9px !important;
    background:
        radial-gradient(circle at 88% 15%, rgba(255, 173, 24, .20), transparent 15rem),
        linear-gradient(135deg, rgba(4, 90, 62, .56), rgba(3, 25, 18, .72)) !important;
    font-size: clamp(2rem, 4.2vw, 3.25rem) !important;
    line-height: .96 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    box-shadow: inset 0 1px rgba(255,255,255,.06), 0 12px 30px rgba(0,0,0,.22) !important;
}

.item-page > h1:first-child::before,
.com-content-article > h1:first-child::before,
.bl-content-card > h1:first-child::before {
    content: "● BEERLEAGUE" !important;
    display: block !important;
    margin: 0 0 .25rem !important;
    color: var(--bl-logo-orange-bright) !important;
    font-size: .70rem !important;
    font-weight: 950 !important;
    letter-spacing: .16em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

.item-page > h2:first-of-type,
.com-content-article > h2:first-of-type,
.bl-content-card > h2:first-of-type {
    margin-top: .15rem !important;
    color: rgba(255,255,255,.96) !important;
    font-size: clamp(1.18rem, 2vw, 1.55rem) !important;
    line-height: 1.16 !important;
    letter-spacing: .04em !important;
    text-transform: none !important;
    text-shadow: 0 2px 0 rgba(0,0,0,.45) !important;
}

.item-page p,
.com-content-article p,
.blog p,
.com-content-category-blog p,
.category-list p,
.categories-list p,
.bl-content-card > p {
    color: rgba(244, 250, 247, .92) !important;
    font-size: clamp(.95rem, .82vw, 1.04rem) !important;
    line-height: 1.62 !important;
    margin: .72rem 0 !important;
}

.item-page p:first-of-type,
.com-content-article p:first-of-type,
.bl-content-card > p:first-of-type {
    color: #fff !important;
}

.item-page h2,
.com-content-article h2,
.blog h2,
.com-content-category-blog h2,
.category-list h2,
.categories-list h2,
.archive h2,
.tag-category h2,
.bl-content-card > h2 {
    position: relative !important;
    margin: 1.15rem 0 .7rem !important;
    padding: .62rem .8rem .58rem 1rem !important;
    border-left: 3px solid var(--bl-logo-orange-bright) !important;
    border-bottom: 1px solid rgba(0,208,132,.28) !important;
    border-radius: 8px !important;
    background: linear-gradient(90deg, rgba(0,208,132,.16), rgba(0,0,0,.08) 72%, transparent) !important;
    color: #fff !important;
    font-size: clamp(1.24rem, 2.2vw, 1.72rem) !important;
    line-height: 1.1 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    text-shadow: 0 2px 0 rgba(0,0,0,.55) !important;
}

.item-page h3,
.com-content-article h3,
.blog h3,
.com-content-category-blog h3,
.category-list h3,
.categories-list h3,
.archive h3,
.tag-category h3,
.bl-content-card > h3 {
    margin: 1rem 0 .5rem !important;
    color: var(--bl-green-bright) !important;
    font-size: clamp(1rem, 1.55vw, 1.28rem) !important;
    line-height: 1.18 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
}

.item-page hr,
.com-content-article hr,
.bl-content-card > hr {
    height: 1px !important;
    border: 0 !important;
    margin: 1rem 0 !important;
    background: linear-gradient(90deg, rgba(255,173,24,.72), rgba(0,208,132,.42), transparent) !important;
}

.item-page ul,
.item-page ol,
.com-content-article ul,
.com-content-article ol,
.bl-content-card > ul,
.bl-content-card > ol {
    margin: .75rem 0 .95rem 1.1rem !important;
    padding-left: .95rem !important;
}
.item-page li,
.com-content-article li,
.bl-content-card > ul li,
.bl-content-card > ol li {
    margin: .42rem 0 !important;
    color: rgba(244,250,247,.92) !important;
    line-height: 1.55 !important;
}
.item-page li::marker,
.com-content-article li::marker,
.bl-content-card > ul li::marker,
.bl-content-card > ol li::marker {
    color: var(--bl-logo-orange-bright) !important;
}

.item-page blockquote,
.com-content-article blockquote,
.bl-content-card > blockquote {
    margin: 1rem 0 !important;
    padding: .85rem 1rem !important;
    border-left: 4px solid var(--bl-green-bright) !important;
    border-radius: 8px !important;
    background: rgba(0, 208, 132, .10) !important;
    color: #fff !important;
    box-shadow: inset 0 1px rgba(255,255,255,.05) !important;
}

.item-page a:not(.btn),
.com-content-article a:not(.btn),
.bl-content-card > p a:not(.btn) {
    color: var(--bl-logo-orange-bright) !important;
    font-weight: 850 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
}
.item-page a:not(.btn):hover,
.com-content-article a:not(.btn):hover,
.bl-content-card > p a:not(.btn):hover {
    color: #fff !important;
}

/* Category/blog article listings get a card treatment instead of plain rows. */
.blog-item,
.com-content-category-blog .blog-item,
.blog .items-leading > div,
.blog .items-row > div,
.category-list .cat-list-row,
.categories-list .item,
.archive .archive-item,
.tag-category .category > li {
    margin: .85rem 0 !important;
    padding: .85rem .95rem !important;
    border: 1px solid rgba(0,208,132,.26) !important;
    border-left: 3px solid rgba(255,173,24,.72) !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg, rgba(2, 30, 21, .76), rgba(1, 12, 9, .74)) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.04) !important;
}

.blog-item .item-title,
.blog-item h2,
.blog-item h3,
.category-list .list-title,
.categories-list .item-title,
.archive .page-header h2,
.tag-category .category h3 {
    margin-top: 0 !important;
}


/* Tables inside normal articles get the same darker BEERLEAGUE panel look. */
.item-page table,
.com-content-article table,
.category-list table,
.bl-content-card > table {
    overflow: hidden !important;
    border: 1px solid rgba(0,208,132,.26) !important;
    border-radius: 9px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: rgba(0,0,0,.22) !important;
}
.item-page table th,
.com-content-article table th,
.category-list table th,
.bl-content-card > table th {
    background: rgba(0,208,132,.18) !important;
    color: var(--bl-green-bright) !important;
}
.item-page table td,
.com-content-article table td,
.category-list table td,
.bl-content-card > table td {
    background: rgba(0,0,0,.20) !important;
}

/* Keep article text comfortable on smaller screens. */
@media (max-width: 900px) {
    .bl-content-card {
        padding: .75rem !important;
        border-radius: 9px !important;
        inset: auto !important;
    }

    .item-page .page-header h1,
    .item-page .page-header h2,
    .com-content-article .page-header h1,
    .com-content-article .page-header h2,
    .item-page > h1:first-child,
    .com-content-article > h1:first-child,
    .bl-content-card > h1:first-child {
        font-size: clamp(1.75rem, 9vw, 2.65rem) !important;
        letter-spacing: .07em !important;
    }

    .item-page .page-header,
    .com-content-article .page-header,
    .blog .page-header,
    .com-content-category-blog .page-header,
    .category-list .page-header,
    .categories-list .page-header,
    .archive .page-header,
    .tag-category .page-header,
    .item-page > h1:first-child,
    .com-content-article > h1:first-child,
    .bl-content-card > h1:first-child {
        padding: .78rem .82rem .76rem .9rem !important;
    }
}


/* v1.0.37 - tighter body headings and BEERLEAGUE contact form styling.
   Keeps Joomla articles/forms aligned with the darker server/status UI without oversized titles. */
.bl-content-card {
    padding: clamp(.95rem, 1.35vw, 1.25rem) !important;
}

/* Scale normal Joomla content headings back so articles do not overpower modules/stats cards. */
.item-page .page-header,
.com-content-article .page-header,
.blog .page-header,
.com-content-category-blog .page-header,
.category-list .page-header,
.categories-list .page-header,
.archive .page-header,
.tag-category .page-header,
.item-page > h1:first-child,
.com-content-article > h1:first-child,
.bl-content-card > h1:first-child {
    margin-bottom: .75rem !important;
    padding: .72rem .86rem .68rem .92rem !important;
    border-radius: 8px !important;
}

.item-page .page-header::before,
.com-content-article .page-header::before,
.blog .page-header::before,
.com-content-category-blog .page-header::before,
.category-list .page-header::before,
.categories-list .page-header::before,
.archive .page-header::before,
.tag-category .page-header::before,
.item-page > h1:first-child::before,
.com-content-article > h1:first-child::before,
.bl-content-card > h1:first-child::before {
    margin-bottom: .18rem !important;
    font-size: .62rem !important;
    letter-spacing: .14em !important;
}

.item-page .page-header h1,
.item-page .page-header h2,
.com-content-article .page-header h1,
.com-content-article .page-header h2,
.blog .page-header h1,
.blog .page-header h2,
.com-content-category-blog .page-header h1,
.com-content-category-blog .page-header h2,
.category-list .page-header h1,
.categories-list .page-header h1,
.archive .page-header h1,
.tag-category .page-header h1,
.item-page > h1:first-child,
.com-content-article > h1:first-child,
.bl-content-card > h1:first-child {
    font-size: clamp(1.45rem, 2.6vw, 2.25rem) !important;
    line-height: 1.02 !important;
    letter-spacing: .085em !important;
}

.item-page > h2:first-of-type,
.com-content-article > h2:first-of-type,
.bl-content-card > h2:first-of-type {
    font-size: clamp(1.05rem, 1.55vw, 1.32rem) !important;
    margin-top: .05rem !important;
    margin-bottom: .55rem !important;
}

.item-page h2,
.com-content-article h2,
.blog h2,
.com-content-category-blog h2,
.category-list h2,
.categories-list h2,
.archive h2,
.tag-category h2,
.bl-content-card > h2 {
    margin: .95rem 0 .55rem !important;
    padding: .48rem .68rem .44rem .82rem !important;
    border-radius: 7px !important;
    font-size: clamp(1.05rem, 1.8vw, 1.40rem) !important;
    letter-spacing: .045em !important;
}

.item-page h3,
.com-content-article h3,
.blog h3,
.com-content-category-blog h3,
.category-list h3,
.categories-list h3,
.archive h3,
.tag-category h3,
.bl-content-card > h3 {
    margin: .85rem 0 .42rem !important;
    font-size: clamp(.94rem, 1.25vw, 1.12rem) !important;
    letter-spacing: .065em !important;
}

.item-page p,
.com-content-article p,
.blog p,
.com-content-category-blog p,
.category-list p,
.categories-list p,
.bl-content-card > p {
    font-size: clamp(.88rem, .78vw, .98rem) !important;
    line-height: 1.55 !important;
}

/* Contact page: modern BEERLEAGUE card/panel treatment for Joomla com_contact. */
.com-contact,
.contact,
.com-contact__container,
.com-contact .contact,
.bl-content-card .contact {
    color: rgba(244,250,247,.94) !important;
}

.com-contact .contact-image,
.contact .contact-image,
.com-contact .thumbnail,
.contact .thumbnail,
.com-contact__image,
.bl-content-card .contact-image {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(260px, 100%) !important;
    margin: .55rem 0 .95rem !important;
    padding: .55rem !important;
    border: 1px solid rgba(0,208,132,.28) !important;
    border-radius: 12px !important;
    background: radial-gradient(circle at 50% 45%, rgba(0,208,132,.16), rgba(0,0,0,.35) 58%, rgba(0,0,0,.55)) !important;
    box-shadow: 0 12px 34px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.05) !important;
}

.com-contact .contact-image img,
.contact .contact-image img,
.com-contact .thumbnail img,
.contact .thumbnail img,
.com-contact__image img,
.bl-content-card .contact-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 235px !important;
    border-radius: 8px !important;
}

.com-contact .dl-horizontal,
.contact .dl-horizontal,
.com-contact dl.contact-address,
.contact dl.contact-address,
.com-contact .contact-miscinfo,
.contact .contact-miscinfo {
    margin: .65rem 0 1rem !important;
    padding: .7rem .8rem !important;
    border: 1px solid rgba(0,208,132,.22) !important;
    border-left: 3px solid var(--bl-logo-orange-bright) !important;
    border-radius: 9px !important;
    background: rgba(0,0,0,.20) !important;
}

.com-contact .contact-form,
.contact .contact-form,
.com-contact__form,
.bl-content-card form#contact-form,
.bl-content-card .com-contact form,
.bl-content-card .contact form {
    margin-top: .85rem !important;
    padding: .9rem !important;
    border: 1px solid rgba(0,208,132,.34) !important;
    border-radius: 12px !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(0,208,132,.15), transparent 15rem),
        linear-gradient(180deg, rgba(2,34,24,.76), rgba(0,9,7,.78)) !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.05) !important;
}

.bl-content-card form#contact-form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .65rem .75rem !important;
}

.bl-content-card form#contact-form fieldset {
    display: contents !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.bl-content-card form#contact-form legend,
.com-contact .contact-form legend,
.contact .contact-form legend {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    gap: .45rem !important;
    width: 100% !important;
    margin: 0 0 .25rem !important;
    padding: .52rem .7rem !important;
    border: 1px solid rgba(255,173,24,.36) !important;
    border-left: 3px solid var(--bl-logo-orange-bright) !important;
    border-radius: 8px !important;
    background: linear-gradient(90deg, rgba(255,173,24,.15), rgba(0,208,132,.08), transparent) !important;
    color: #fff !important;
    font-size: clamp(.98rem, 1.25vw, 1.15rem) !important;
    font-weight: 950 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

.bl-content-card form#contact-form legend::before,
.com-contact .contact-form legend::before,
.contact .contact-form legend::before {
    content: "●" !important;
    color: var(--bl-green-bright) !important;
    text-shadow: 0 0 10px rgba(0,208,132,.55) !important;
}

.bl-content-card form#contact-form .control-group,
.com-contact .contact-form .control-group,
.contact .contact-form .control-group,
.bl-content-card form#contact-form .form-group,
.com-contact .contact-form .form-group,
.contact .contact-form .form-group {
    min-width: 0 !important;
    margin: 0 !important;
    padding: .62rem !important;
    border: 1px solid rgba(0,208,132,.18) !important;
    border-radius: 9px !important;
    background: rgba(0,0,0,.20) !important;
}

.bl-content-card form#contact-form .control-group:has(textarea),
.bl-content-card form#contact-form .control-group:has(input[name*="subject" i]),
.bl-content-card form#contact-form .control-group:has(input[type="submit"]),
.bl-content-card form#contact-form .control-group:has(button[type="submit"]),
.bl-content-card form#contact-form .control-group:has(input[type="checkbox"]),
.bl-content-card form#contact-form .control-group:has(.g-recaptcha),
.bl-content-card form#contact-form .form-group:has(textarea),
.bl-content-card form#contact-form .form-group:has(input[name*="subject" i]),
.bl-content-card form#contact-form .form-group:has(input[type="submit"]),
.bl-content-card form#contact-form .form-group:has(button[type="submit"]),
.bl-content-card form#contact-form .form-group:has(input[type="checkbox"]),
.bl-content-card form#contact-form .form-group:has(.g-recaptcha) {
    grid-column: 1 / -1 !important;
}

.com-contact .contact-form label,
.contact .contact-form label,
.bl-content-card form#contact-form label,
.bl-content-card form#contact-form .control-label {
    display: block !important;
    margin: 0 0 .28rem !important;
    color: rgba(255,255,255,.92) !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.65) !important;
}

.com-contact .contact-form .star,
.contact .contact-form .star,
.bl-content-card form#contact-form .star {
    color: var(--bl-logo-orange-bright) !important;
}

.com-contact .contact-form input[type="text"],
.com-contact .contact-form input[type="email"],
.com-contact .contact-form input[type="url"],
.com-contact .contact-form textarea,
.contact .contact-form input[type="text"],
.contact .contact-form input[type="email"],
.contact .contact-form input[type="url"],
.contact .contact-form textarea,
.bl-content-card form#contact-form input[type="text"],
.bl-content-card form#contact-form input[type="email"],
.bl-content-card form#contact-form input[type="url"],
.bl-content-card form#contact-form textarea {
    width: 100% !important;
    min-height: 38px !important;
    border: 1px solid rgba(0,208,132,.35) !important;
    border-radius: 8px !important;
    background: rgba(237,255,249,.92) !important;
    color: #06110d !important;
    padding: .52rem .68rem !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.20) !important;
}

.com-contact .contact-form textarea,
.contact .contact-form textarea,
.bl-content-card form#contact-form textarea {
    min-height: 170px !important;
    border-radius: 10px !important;
    resize: vertical !important;
}

.com-contact .contact-form input:focus,
.com-contact .contact-form textarea:focus,
.contact .contact-form input:focus,
.contact .contact-form textarea:focus,
.bl-content-card form#contact-form input:focus,
.bl-content-card form#contact-form textarea:focus {
    outline: none !important;
    border-color: var(--bl-logo-orange-bright) !important;
    box-shadow: 0 0 0 2px rgba(255,173,24,.18), 0 0 18px rgba(0,208,132,.20), inset 0 1px 3px rgba(0,0,0,.18) !important;
}

.bl-content-card form#contact-form .form-check,
.com-contact .contact-form .form-check,
.contact .contact-form .form-check {
    display: flex !important;
    align-items: center !important;
    gap: .5rem !important;
}

.bl-content-card form#contact-form input[type="checkbox"],
.com-contact .contact-form input[type="checkbox"],
.contact .contact-form input[type="checkbox"] {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    accent-color: var(--bl-green-bright) !important;
}

.bl-content-card form#contact-form .controls,
.com-contact .contact-form .controls,
.contact .contact-form .controls {
    min-width: 0 !important;
}

.bl-content-card form#contact-form .btn,
.bl-content-card form#contact-form button[type="submit"],
.bl-content-card form#contact-form input[type="submit"],
.com-contact .contact-form .btn,
.com-contact .contact-form button[type="submit"],
.com-contact .contact-form input[type="submit"],
.contact .contact-form .btn,
.contact .contact-form button[type="submit"],
.contact .contact-form input[type="submit"] {
    width: auto !important;
    min-width: 118px !important;
    justify-self: start !important;
    border-radius: 8px !important;
    padding: .56rem .85rem !important;
    letter-spacing: .07em !important;
    box-shadow: 0 9px 20px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.15) !important;
}

.bl-content-card form#contact-form .control-group:has(button[type="submit"]),
.bl-content-card form#contact-form .control-group:has(input[type="submit"]),
.bl-content-card form#contact-form .form-group:has(button[type="submit"]),
.bl-content-card form#contact-form .form-group:has(input[type="submit"]) {
    display: flex !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

@media (max-width: 780px) {
    .bl-content-card form#contact-form {
        grid-template-columns: 1fr !important;
    }

    .item-page .page-header h1,
    .item-page .page-header h2,
    .com-content-article .page-header h1,
    .com-content-article .page-header h2,
    .item-page > h1:first-child,
    .com-content-article > h1:first-child,
    .bl-content-card > h1:first-child {
        font-size: clamp(1.35rem, 8vw, 2.05rem) !important;
    }
}


/* v1.0.38 - softer map-tile light-up.
   The random tile animation should feel like a subtle neon wash instead of
   blowing out the CSS map screenshots. This keeps the maps readable while
   still letting individual tiles gently wake up after the collage loads. */
.bl-header-map-collage .bl-map-tile {
    animation:
        bl-map-tile-flip .84s cubic-bezier(.18,.84,.28,1) calc(var(--bl-map-flip-start) + var(--d)) 1 forwards,
        bl-map-tile-random-light-v1055 var(--ls, 9200ms) ease-in-out calc(var(--bl-map-light-start) + var(--lg, 0ms)) infinite !important;
}

.bl-header-map-collage .bl-map-tile::after {
    animation: bl-map-tile-soft-glow-v1055 var(--ls, 9200ms) ease-in-out calc(var(--bl-map-light-start) + var(--lg, 0ms)) infinite !important;
}

@keyframes bl-map-tile-random-light-v1055 {
    0%, 5%, 30%, 60%, 100% {
        opacity: .48;
        filter: brightness(.62) contrast(1.08) saturate(1.04);
        box-shadow: inset 0 0 0 1px rgba(0,0,0,.32);
    }
    10%, 40%, 70% {
        opacity: .55;
        filter: brightness(.78) contrast(1.09) saturate(1.09);
    }
    16%, 46%, 76% {
        opacity: calc(.55 + (var(--lp, .86) * .12));
        filter: brightness(1.12) contrast(1.10) saturate(1.18);
        box-shadow:
            inset 0 0 0 1px rgba(0, 208, 132, .18),
            inset 0 0 18px rgba(255, 173, 24, .08),
            0 0 16px rgba(0, 208, 132, .10);
    }
    22%, 52%, 84% {
        opacity: .53;
        filter: brightness(.72) contrast(1.08) saturate(1.08);
    }
}

@keyframes bl-map-tile-soft-glow-v1055 {
    0%, 5%, 31%, 61%, 100% {
        opacity: 0;
        filter: brightness(1) contrast(1.04) saturate(1.04);
        box-shadow: inset 0 0 0 1px rgba(0, 208, 132, 0), inset 0 0 12px rgba(255, 173, 24, 0);
    }
    11%, 41%, 71% {
        opacity: calc(var(--lp, .86) * .10);
        filter: brightness(1.08) contrast(1.06) saturate(1.10);
    }
    17%, 47%, 77% {
        opacity: calc(var(--lp, .86) * .18);
        filter: brightness(1.16) contrast(1.08) saturate(1.18);
        box-shadow: inset 0 0 0 1px rgba(0, 208, 132, .12), inset 0 0 20px rgba(255, 173, 24, .06), 0 0 14px rgba(0, 208, 132, .08);
    }
    23%, 53%, 85% {
        opacity: calc(var(--lp, .86) * .06);
        filter: brightness(1.04) contrast(1.05) saturate(1.08);
    }
}

/* v1.0.41 - configurable header map-tile start delay.
   Default is a short one-second pause, but Template Styles > BEERLEAGUE Options
   can now control the delay in milliseconds. */
:root {
    --bl-map-flip-start: 1000ms !important;
    --bl-map-light-start: 3650ms !important;
}

.bl-header-map-collage::after {
    animation: bl-header-neon-wake 2.85s ease-out .18s 1 both !important;
}

.bl-header-map-collage .bl-map-tile {
    animation:
        bl-map-tile-flip .84s cubic-bezier(.18,.84,.28,1) calc(var(--bl-map-flip-start) + var(--d)) 1 forwards,
        bl-map-tile-random-light-v1055 var(--ls, 9200ms) ease-in-out calc(var(--bl-map-light-start) + var(--lg, 0ms)) infinite !important;
}

.bl-header-map-collage .bl-map-tile::after {
    animation: bl-map-tile-soft-glow-v1055 var(--ls, 9200ms) ease-in-out calc(var(--bl-map-light-start) + var(--lg, 0ms)) infinite !important;
}

/* v1.0.42 - logged-in header identity uses Steam profile when available. */
.bl-top-login-area .bl-login-greeting,
.bl-top-login-module-utility .bl-login-greeting {
    gap: .28rem !important;
}
.bl-login-steam-identity {
    display: inline-flex !important;
    align-items: center !important;
    gap: .28rem !important;
    min-width: 0 !important;
}
.bl-login-steam-avatar {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    border-radius: 5px !important;
    object-fit: cover !important;
    border: 1px solid rgba(0, 232, 154, .55) !important;
    box-shadow: 0 0 10px rgba(0, 232, 154, .26), 0 2px 6px rgba(0,0,0,.35) !important;
}
.bl-login-display-name {
    min-width: 0 !important;
    max-width: 150px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.bl-login-greeting-prefix,
.bl-login-comma {
    flex: 0 0 auto !important;
}
.bl-top-login-area .bl-edit-profile-btn,
.bl-top-login-module-utility .bl-edit-profile-btn {
    display: none !important;
}
@media (max-width: 760px) {
    .bl-login-display-name { max-width: 92px !important; }
}


/* v1.0.43 - cleaner Steam identity in top login and compact server/status header module refinements. */
.bl-top-login-area .bl-login-greeting,
.bl-top-login-module-utility .bl-login-greeting {
    gap: .34rem !important;
}
.bl-login-greeting-prefix,
.bl-login-comma {
    display: none !important;
}
.bl-login-steam-avatar {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    border-radius: 8px !important;
    border-color: rgba(0, 232, 154, .72) !important;
    box-shadow: 0 0 14px rgba(0, 232, 154, .34), 0 3px 8px rgba(0,0,0,.42) !important;
}
.bl-login-display-name {
    max-width: 175px !important;
}
.bl-top-login-area .bl-login-userdata,
.bl-top-login-module-utility .bl-login-userdata {
    align-items: center !important;
}

/* Header server-status module title tabs and smaller cards. */
.bl-server-status-row .blsrv-status-module-v1019.has-folder-tab {
    padding-top: 0 !important;
}
.bl-server-status-row .blsrv-status-module-v1019 .blsrv-status-module-head {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: calc(100% - 18px) !important;
    margin: 0 0 -1px 10px !important;
    padding: 6px 11px 5px !important;
    border: 1px solid rgba(0,232,154,.44) !important;
    border-bottom: 0 !important;
    border-radius: 10px 10px 0 0 !important;
    background: linear-gradient(180deg, rgba(5,70,49,.96), rgba(1,28,19,.98)) !important;
    box-shadow: 0 -4px 14px rgba(0,0,0,.20), inset 0 1px rgba(255,255,255,.07) !important;
    position: relative !important;
    z-index: 3 !important;
}
.bl-server-status-row .blsrv-status-module-v1019 .blsrv-status-heading {
    font-size: 9.5px !important;
    letter-spacing: .085em !important;
}
.bl-server-status-row .blsrv-status-module-v1019 .blsrv-status-card {
    min-height: 136px !important;
    padding: 8px 9px 8px !important;
}
.bl-server-status-row .blsrv-status-module-v1019.has-folder-tab .blsrv-status-card {
    border-top-left-radius: 7px !important;
}
.bl-server-status-row .blsrv-status-module-v1019 .blsrv-status-statusline {
    margin-bottom: 5px !important;
}
.bl-server-status-row .blsrv-status-module-v1019 .blsrv-status-tile {
    grid-template-columns: minmax(76px, 92px) minmax(0, 1fr) minmax(84px, auto) !important;
    gap: 8px !important;
    align-items: stretch !important;
}
.bl-server-status-row .blsrv-status-module-v1019 .blsrv-status-mapbox {
    height: 70px !important;
    border-radius: 8px !important;
}
.bl-server-status-row .blsrv-status-module-v1019 .blsrv-status-map-overlay {
    padding: 17px 6px 6px !important;
}
.bl-server-status-row .blsrv-status-module-v1019 .blsrv-status-map-overlay strong {
    font-size: 10.5px !important;
}
.bl-server-status-row .blsrv-status-module-v1019 .blsrv-status-details {
    gap: 5px !important;
}
.bl-server-status-row .blsrv-status-module-v1019 .blsrv-status-stat-grid {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
}
.bl-server-status-row .blsrv-status-module-v1019 .blsrv-status-stat {
    padding: 6px 7px !important;
    min-height: 42px !important;
}
.bl-server-status-row .blsrv-status-module-v1019 .blsrv-status-stat strong {
    font-size: 11px !important;
}
.bl-server-status-row .blsrv-status-module-v1019 .blsrv-status-vac-wrap {
    align-self: stretch !important;
}
.bl-server-status-row .blsrv-status-module-v1019 .blsrv-status-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    min-width: 84px !important;
    padding: 0 !important;
    margin: 0 !important;
}
.bl-server-status-row .blsrv-status-module-v1019 .blsrv-status-nav-inline {
    display: flex !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    gap: 4px !important;
}
.bl-server-status-row .blsrv-status-module-v1019 .blsrv-status-connect {
    width: 100% !important;
    min-width: 72px !important;
    padding: 6px 8px !important;
}
.bl-server-status-row .blsrv-status-module-v1019 .blsrv-status-players {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    margin-top: 0 !important;
}
@container (max-width: 470px) {
    .bl-server-status-row .blsrv-status-module-v1019 .blsrv-status-tile {
        grid-template-columns: minmax(76px, 92px) minmax(0, 1fr) !important;
    }
    .bl-server-status-row .blsrv-status-module-v1019 .blsrv-status-actions,
    .bl-server-status-row .blsrv-status-module-v1019 .blsrv-status-players {
        grid-column: 1 / -1 !important;
    }
    .bl-server-status-row .blsrv-status-module-v1019 .blsrv-status-actions {
        flex-direction: row !important;
        align-items: center !important;
    }
}

/* v1.0.44 - larger Steam avatar and integrated server-status titles. */
.bl-top-login-area .bl-login-greeting-prefix,
.bl-top-login-area .bl-login-comma,
.bl-top-login-module-utility .bl-login-greeting-prefix,
.bl-top-login-module-utility .bl-login-comma {
    display: none !important;
}
.bl-top-login-area .bl-login-steam-avatar,
.bl-top-login-module-utility .bl-login-steam-avatar {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    border-radius: 9px !important;
    border-color: rgba(0, 232, 154, .78) !important;
    box-shadow: 0 0 18px rgba(0, 232, 154, .38), 0 3px 10px rgba(0,0,0,.48) !important;
}
.bl-top-login-module-utility .bl-login-logout {
    padding: .22rem .38rem !important;
}
.bl-server-status-row .blsrv-status-module-v1020 .blsrv-status-module-head {
    display: none !important;
}
.bl-server-status-row .blsrv-status-module-v1020 .blsrv-status-card {
    min-height: 164px !important;
    padding: 8px 9px 8px !important;
    border-top-left-radius: 12px !important;
}
.bl-server-status-row .blsrv-status-module-v1020 .blsrv-status-card-titleline {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    padding: 2px 2px 6px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    margin: 0 0 5px !important;
}
.bl-server-status-row .blsrv-status-module-v1020 .blsrv-status-card-title {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    color: #e9f5ee !important;
    font-size: 10.5px !important;
    font-weight: 950 !important;
    letter-spacing: .075em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 0 #000 !important;
}
.bl-server-status-row .blsrv-status-module-v1020 .blsrv-status-statusline {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 6px 8px !important;
    margin: 0 0 7px !important;
}
.bl-server-status-row .blsrv-status-module-v1020 .blsrv-status-tile {
    grid-template-columns: minmax(82px, 96px) minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 8px !important;
}
.bl-server-status-row .blsrv-status-module-v1020 .blsrv-status-mapbox {
    height: 70px !important;
    border-radius: 8px !important;
}
.bl-server-status-row .blsrv-status-module-v1020 .blsrv-status-stat-grid {
    grid-template-columns: minmax(0, 1fr) auto !important;
}
.bl-server-status-row .blsrv-status-module-v1020 .blsrv-status-vac-wrap {
    min-width: 42px !important;
    width: 42px !important;
    min-height: 40px !important;
}
.bl-server-status-row .blsrv-status-module-v1020 .blsrv-status-actions {
    grid-column: auto !important;
    grid-row: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    min-width: 0 !important;
    margin: 7px 0 6px !important;
    padding: 0 !important;
}
.bl-server-status-row .blsrv-status-module-v1020 .blsrv-status-nav-inline {
    margin-right: auto !important;
    justify-content: flex-start !important;
}
.bl-server-status-row .blsrv-status-module-v1020 .blsrv-status-connect {
    width: auto !important;
    min-width: 82px !important;
    padding: 6px 10px !important;
}
.bl-server-status-row .blsrv-status-module-v1020 .blsrv-status-players {
    grid-column: auto !important;
    grid-row: auto !important;
    margin-top: auto !important;
}
.bl-summary-server-tab {
    display: none !important;
}
.bl-summary-compact-server .bl-summary-server-card {
    border-top-left-radius: 12px !important;
}
.bl-summary-compact-server .bl-summary-server-title {
    color: #e9f5ee !important;
    font-size: 10.5px !important;
    font-weight: 950 !important;
    letter-spacing: .075em !important;
}
@media (max-width: 760px) {
    .bl-top-login-area .bl-login-steam-avatar,
    .bl-top-login-module-utility .bl-login-steam-avatar {
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
    }
}


/* v1.0.45 - server status module row polish and light stats summary card in server-status slot. */
.bl-server-status-row .blsrv-status-module-v1021 .blsrv-status-players {
    width: 100% !important;
    max-width: none !important;
}
.bl-server-status-row .blsrv-status-module-v1021 .blsrv-status-section-title {
    width: 100% !important;
}
.bl-server-status-row .blsrv-status-module-v1021 .blsrv-status-player-list {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important;
    max-height: 78px !important;
}
.bl-server-status-row .blsrv-status-module-v1021 .blsrv-status-stat-grid {
    grid-template-columns: minmax(78px, 108px) auto !important;
    justify-content: start !important;
}
.bl-server-status-row .blsrv-status-module-v1021 .blsrv-status-stat {
    max-width: 108px !important;
}
.bl-server-status-row .bl-summary-compact-server {
    display: flex !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 164px !important;
    width: 100% !important;
}
.bl-server-status-row .bl-summary-compact-server .bl-summary-server-card {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 164px !important;
    height: 100% !important;
}
.bl-server-status-row .bl-summary-compact-server .bl-summary-server-metrics {
    flex: 1 1 auto !important;
}


/* v1.0.47 - Clean top-menu dropdown submenus.
   Joomla mod_menu child ULs were displaying as normal flex items in the header,
   causing child menu links to wrap into the main nav row. Keep only top-level
   items in the row and render children as compact BEERLEAGUE dropdown panels. */
.bl-top-menu,
.bl-top-menu-utility,
.bl-top-menu .moduletable,
.bl-top-menu .mod-menu,
.bl-top-menu ul {
    overflow: visible !important;
}
.bl-top-menu > ul,
.bl-top-menu .mod-menu,
.bl-top-menu .navbar-nav,
.bl-top-menu .nav {
    align-items: center !important;
    flex-wrap: wrap !important;
}
.bl-top-menu li,
.bl-top-menu .nav-item,
.bl-top-menu .deeper,
.bl-top-menu .parent {
    position: relative !important;
}
.bl-top-menu li > ul,
.bl-top-menu .nav-item > ul,
.bl-top-menu .deeper > ul,
.bl-top-menu .parent > ul,
.bl-top-menu .mod-menu__sub,
.bl-top-menu .dropdown-menu {
    position: absolute !important;
    top: calc(100% + 7px) !important;
    left: 0 !important;
    z-index: 5000 !important;
    display: grid !important;
    min-width: 190px !important;
    max-width: min(300px, 90vw) !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 8px !important;
    list-style: none !important;
    border: 1px solid rgba(0, 220, 154, .45) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(2, 20, 13, .98), rgba(5, 45, 31, .98)) !important;
    box-shadow: 0 18px 34px rgba(0,0,0,.42), 0 0 18px rgba(0,220,154,.14) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-4px) !important;
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease !important;
}
.bl-top-menu li:hover > ul,
.bl-top-menu li:focus-within > ul,
.bl-top-menu .nav-item:hover > ul,
.bl-top-menu .nav-item:focus-within > ul,
.bl-top-menu .deeper:hover > ul,
.bl-top-menu .deeper:focus-within > ul,
.bl-top-menu .parent:hover > ul,
.bl-top-menu .parent:focus-within > ul,
.bl-top-menu .dropdown:hover > .dropdown-menu,
.bl-top-menu .dropdown:focus-within > .dropdown-menu,
.bl-top-menu .dropdown-menu.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}
.bl-top-menu li > ul::before,
.bl-top-menu .nav-item > ul::before,
.bl-top-menu .mod-menu__sub::before,
.bl-top-menu .dropdown-menu::before {
    content: "" !important;
    position: absolute !important;
    left: 18px !important;
    top: -6px !important;
    width: 10px !important;
    height: 10px !important;
    border-left: 1px solid rgba(0, 220, 154, .42) !important;
    border-top: 1px solid rgba(0, 220, 154, .42) !important;
    background: rgba(3, 31, 21, .98) !important;
    transform: rotate(45deg) !important;
}
.bl-top-menu li > ul li,
.bl-top-menu .nav-item > ul li,
.bl-top-menu .mod-menu__sub li,
.bl-top-menu .dropdown-menu li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}
.bl-top-menu li > ul a,
.bl-top-menu li > ul .nav-link,
.bl-top-menu .nav-item > ul a,
.bl-top-menu .nav-item > ul .nav-link,
.bl-top-menu .mod-menu__sub a,
.bl-top-menu .mod-menu__sub .nav-link,
.bl-top-menu .dropdown-menu a,
.bl-top-menu .dropdown-menu .nav-link {
    display: flex !important;
    width: 100% !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    border-color: rgba(255,255,255,.10) !important;
    background: rgba(255,255,255,.045) !important;
    color: #fff !important;
    font-size: .72rem !important;
    line-height: 1.15 !important;
    padding: 8px 10px !important;
    text-align: left !important;
    white-space: nowrap !important;
}
.bl-top-menu li > ul a:hover,
.bl-top-menu li > ul a:focus,
.bl-top-menu .mod-menu__sub a:hover,
.bl-top-menu .mod-menu__sub a:focus,
.bl-top-menu .dropdown-menu a:hover,
.bl-top-menu .dropdown-menu a:focus,
.bl-top-menu li > ul .current > a,
.bl-top-menu li > ul .active > a {
    border-color: rgba(255,176,0,.62) !important;
    background: rgba(255,176,0,.16) !important;
    color: #ffb000 !important;
}
.bl-top-menu .deeper > a::after,
.bl-top-menu .parent > a::after,
.bl-top-menu .dropdown > a::after,
.bl-top-menu .dropdown-toggle::after {
    content: "▾" !important;
    display: inline-block !important;
    margin-left: .34rem !important;
    border: 0 !important;
    color: rgba(255,176,0,.95) !important;
    font-size: .72em !important;
    transform: translateY(-1px) !important;
}
@media (max-width: 720px) {
    .bl-top-menu li > ul,
    .bl-top-menu .nav-item > ul,
    .bl-top-menu .mod-menu__sub,
    .bl-top-menu .dropdown-menu {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        margin-top: 6px !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
    }
    .bl-top-menu li > ul::before,
    .bl-top-menu .mod-menu__sub::before,
    .bl-top-menu .dropdown-menu::before { display: none !important; }
}


/* v1.0.48 - Template override-backed mod_menu dropdown hardening. */
.bl-top-menu .bl-menu-tree {
    display: flex !important;
    gap: .45rem !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}
.bl-top-menu .bl-menu-tree > li {
    flex: 0 0 auto !important;
}
.bl-top-menu .bl-menu-tree > li > .bl-submenu,
.bl-top-menu .bl-menu-tree > li > ul {
    flex-wrap: nowrap !important;
}
.bl-top-menu .bl-menu-parent > .nav-link {
    gap: .25rem !important;
}
.bl-top-menu .bl-menu-parent > .nav-link::after {
    content: "▾" !important;
    display: inline-block !important;
    margin-left: .25rem !important;
    color: rgba(255,176,0,.95) !important;
    font-size: .78em !important;
    line-height: 1 !important;
}
.bl-top-menu .bl-submenu {
    text-align: left !important;
}
.bl-top-menu .bl-submenu .nav-link {
    text-shadow: none !important;
}
@media (min-width: 721px) {
    .bl-top-menu .bl-menu-tree > .level-2,
    .bl-top-menu .bl-menu-tree > .level-3,
    .bl-top-menu .bl-menu-tree > .level-4,
    .bl-top-menu .bl-menu-tree > .level-5 {
        display: none !important;
    }
}


/* v1.0.49 - Repair flat Joomla menu output before dropdown styling. */
.bl-top-menu .bl-menu-orphan-child,
.bl-top-menu > ul > li.level-2,
.bl-top-menu > ul > li.level-3,
.bl-top-menu > ul > li.level-4,
.bl-top-menu .mod-menu > li.level-2,
.bl-top-menu .mod-menu > li.level-3,
.bl-top-menu .mod-menu > li.level-4,
.bl-top-menu ul.nav > li.level-2,
.bl-top-menu ul.nav > li.level-3,
.bl-top-menu ul.nav > li.level-4 {
    display: none !important;
}
.bl-top-menu.bl-menu-js-repaired .bl-submenu > li.level-2,
.bl-top-menu.bl-menu-js-repaired .bl-submenu > li.level-3,
.bl-top-menu.bl-menu-js-repaired .bl-submenu > li.level-4,
.bl-top-menu .bl-menu-tree .bl-submenu > li {
    display: block !important;
}
.bl-top-menu .bl-menu-tree > li.level-1,
.bl-top-menu .bl-menu-tree > li:not([class*="level-"]) {
    display: inline-flex !important;
}
.bl-top-menu .bl-has-dropdown {
    cursor: default !important;
}
@media (max-width: 720px) {
    .bl-top-menu > ul > li.level-2,
    .bl-top-menu > ul > li.level-3,
    .bl-top-menu > ul > li.level-4,
    .bl-top-menu .mod-menu > li.level-2,
    .bl-top-menu .mod-menu > li.level-3,
    .bl-top-menu .mod-menu > li.level-4,
    .bl-top-menu ul.nav > li.level-2,
    .bl-top-menu ul.nav > li.level-3,
    .bl-top-menu ul.nav > li.level-4 {
        display: none !important;
    }
}


/* v1.0.50 - Polished dropdown submenu presentation. */
.bl-top-menu .bl-menu-parent {
    isolation: isolate !important;
}
.bl-top-menu .bl-menu-parent > .bl-submenu,
.bl-top-menu .bl-menu-parent > .mod-menu__sub,
.bl-top-menu li > ul.bl-submenu,
.bl-top-menu li > ul.mod-menu__sub,
.bl-top-menu .dropdown-menu {
    min-width: 176px !important;
    max-width: 240px !important;
    gap: 0 !important;
    padding: 7px !important;
    border: 1px solid rgba(0, 220, 154, .58) !important;
    border-radius: 11px !important;
    background:
        radial-gradient(circle at top left, rgba(0, 220, 154, .16), transparent 48%),
        linear-gradient(180deg, rgba(2, 44, 30, .98), rgba(1, 22, 15, .98)) !important;
    box-shadow:
        0 18px 34px rgba(0,0,0,.50),
        0 0 0 1px rgba(255,255,255,.045) inset,
        0 0 20px rgba(0,220,154,.18) !important;
    backdrop-filter: blur(8px) !important;
}
.bl-top-menu .bl-menu-parent > .bl-submenu::before,
.bl-top-menu .bl-menu-parent > .mod-menu__sub::before,
.bl-top-menu li > ul.bl-submenu::before,
.bl-top-menu li > ul.mod-menu__sub::before,
.bl-top-menu .dropdown-menu::before {
    left: 16px !important;
    top: -5px !important;
    width: 9px !important;
    height: 9px !important;
    background: rgba(3, 42, 29, .98) !important;
}
.bl-top-menu .bl-submenu > li,
.bl-top-menu .mod-menu__sub > li,
.bl-top-menu .dropdown-menu > li {
    margin: 0 !important;
    padding: 0 !important;
}
.bl-top-menu .bl-submenu > li + li,
.bl-top-menu .mod-menu__sub > li + li,
.bl-top-menu .dropdown-menu > li + li {
    margin-top: 4px !important;
}
.bl-top-menu .bl-submenu > li > a,
.bl-top-menu .bl-submenu > li > span,
.bl-top-menu .bl-submenu > li > .nav-link,
.bl-top-menu .mod-menu__sub > li > a,
.bl-top-menu .mod-menu__sub > li > span,
.bl-top-menu .mod-menu__sub > li > .nav-link,
.bl-top-menu .dropdown-menu > li > a,
.bl-top-menu .dropdown-menu > li > span,
.bl-top-menu .dropdown-menu > li > .nav-link {
    min-height: 0 !important;
    width: 100% !important;
    justify-content: flex-start !important;
    border: 1px solid rgba(255,255,255,.085) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.04) !important;
    box-shadow: none !important;
    color: rgba(255,255,255,.92) !important;
    font-size: .70rem !important;
    font-weight: 950 !important;
    letter-spacing: .055em !important;
    line-height: 1.1 !important;
    padding: 8px 10px !important;
    text-align: left !important;
    text-shadow: 1px 1px 0 rgba(0,0,0,.70) !important;
    text-transform: uppercase !important;
    transform: none !important;
}
.bl-top-menu .bl-submenu > li > a::before,
.bl-top-menu .bl-submenu > li > span::before,
.bl-top-menu .mod-menu__sub > li > a::before,
.bl-top-menu .mod-menu__sub > li > span::before,
.bl-top-menu .dropdown-menu > li > a::before,
.bl-top-menu .dropdown-menu > li > span::before {
    content: "" !important;
    display: inline-block !important;
    width: 5px !important;
    height: 5px !important;
    margin-right: 8px !important;
    border-radius: 999px !important;
    background: #00dc9a !important;
    box-shadow: 0 0 9px rgba(0,220,154,.85) !important;
}
.bl-top-menu .bl-submenu > li > a:hover,
.bl-top-menu .bl-submenu > li > a:focus,
.bl-top-menu .bl-submenu > li.active > a,
.bl-top-menu .bl-submenu > li.current > a,
.bl-top-menu .mod-menu__sub > li > a:hover,
.bl-top-menu .mod-menu__sub > li > a:focus,
.bl-top-menu .mod-menu__sub > li.active > a,
.bl-top-menu .mod-menu__sub > li.current > a,
.bl-top-menu .dropdown-menu > li > a:hover,
.bl-top-menu .dropdown-menu > li > a:focus {
    border-color: rgba(255,176,0,.70) !important;
    background: linear-gradient(180deg, rgba(255,176,0,.22), rgba(255,176,0,.11)) !important;
    color: #ffb000 !important;
    text-shadow: none !important;
}
.bl-top-menu .bl-submenu > li > a:hover::before,
.bl-top-menu .bl-submenu > li > a:focus::before,
.bl-top-menu .mod-menu__sub > li > a:hover::before,
.bl-top-menu .mod-menu__sub > li > a:focus::before,
.bl-top-menu .dropdown-menu > li > a:hover::before,
.bl-top-menu .dropdown-menu > li > a:focus::before {
    background: #ffb000 !important;
    box-shadow: 0 0 10px rgba(255,176,0,.85) !important;
}
@media (max-width: 720px) {
    .bl-top-menu .bl-menu-parent > .bl-submenu,
    .bl-top-menu .bl-menu-parent > .mod-menu__sub,
    .bl-top-menu li > ul.bl-submenu,
    .bl-top-menu li > ul.mod-menu__sub {
        max-width: none !important;
        border-radius: 10px !important;
    }
}


/* v1.0.51 - restore logo-as-home behavior and stretch submenu tiles. */
.bl-top-menu-home-is-logo .bl-menu-tree > li:first-child,
.bl-top-menu-home-is-logo > ul > li:first-child,
.bl-top-menu-home-is-logo .mod-menu > li:first-child,
.bl-top-menu-home-is-logo .nav > li:first-child {
    display: none !important;
}
.bl-top-menu .bl-menu-parent > .bl-submenu,
.bl-top-menu .bl-menu-parent > .mod-menu__sub,
.bl-top-menu li > ul.bl-submenu,
.bl-top-menu li > ul.mod-menu__sub,
.bl-top-menu .dropdown-menu {
    align-items: stretch !important;
    justify-items: stretch !important;
}
.bl-top-menu .bl-submenu > li,
.bl-top-menu .mod-menu__sub > li,
.bl-top-menu .dropdown-menu > li {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
}
.bl-top-menu .bl-submenu > li > a,
.bl-top-menu .bl-submenu > li > span,
.bl-top-menu .bl-submenu > li > .nav-link,
.bl-top-menu .mod-menu__sub > li > a,
.bl-top-menu .mod-menu__sub > li > span,
.bl-top-menu .mod-menu__sub > li > .nav-link,
.bl-top-menu .dropdown-menu > li > a,
.bl-top-menu .dropdown-menu > li > span,
.bl-top-menu .dropdown-menu > li > .nav-link {
    display: flex !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}
.bl-top-menu .bl-submenu > li > a > *,
.bl-top-menu .mod-menu__sub > li > a > *,
.bl-top-menu .dropdown-menu > li > a > * {
    min-width: 0 !important;
}


/* v1.0.58 - Let dropdown panels expand/contract to fit submenu labels. */
.bl-top-menu .bl-menu-parent > .bl-submenu,
.bl-top-menu .bl-menu-parent > .mod-menu__sub,
.bl-top-menu li > ul.bl-submenu,
.bl-top-menu li > ul.mod-menu__sub,
.bl-top-menu .dropdown-menu {
    width: max-content !important;
    min-width: 176px !important;
    max-width: min(420px, calc(100vw - 24px)) !important;
    grid-template-columns: minmax(max-content, 1fr) !important;
}
.bl-top-menu .bl-submenu > li,
.bl-top-menu .mod-menu__sub > li,
.bl-top-menu .dropdown-menu > li {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
}
.bl-top-menu .bl-submenu > li > a,
.bl-top-menu .bl-submenu > li > span,
.bl-top-menu .bl-submenu > li > .nav-link,
.bl-top-menu .mod-menu__sub > li > a,
.bl-top-menu .mod-menu__sub > li > span,
.bl-top-menu .mod-menu__sub > li > .nav-link,
.bl-top-menu .dropdown-menu > li > a,
.bl-top-menu .dropdown-menu > li > span,
.bl-top-menu .dropdown-menu > li > .nav-link {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: visible !important;
}
@media (max-width: 520px) {
    .bl-top-menu .bl-menu-parent > .bl-submenu,
    .bl-top-menu .bl-menu-parent > .mod-menu__sub,
    .bl-top-menu li > ul.bl-submenu,
    .bl-top-menu li > ul.mod-menu__sub,
    .bl-top-menu .dropdown-menu {
        width: 100% !important;
        max-width: 100% !important;
    }
    .bl-top-menu .bl-submenu > li > a,
    .bl-top-menu .bl-submenu > li > span,
    .bl-top-menu .bl-submenu > li > .nav-link,
    .bl-top-menu .mod-menu__sub > li > a,
    .bl-top-menu .mod-menu__sub > li > span,
    .bl-top-menu .mod-menu__sub > li > .nav-link,
    .bl-top-menu .dropdown-menu > li > a,
    .bl-top-menu .dropdown-menu > li > span,
    .bl-top-menu .dropdown-menu > li > .nav-link {
        white-space: normal !important;
    }
}


/* v1.0.58 - BEERLEAGUE footer safe redesign: integrated dark panel without global/clipping overrides. */
body.beerleague-site {
    background-color: #020706 !important;
}
.bl-footer {
    margin-top: clamp(1.25rem, 3vw, 2.4rem) !important;
    padding: 0 0 clamp(1.4rem, 3vw, 2.3rem) !important;
    border-top: 0 !important;
    color: rgba(238, 255, 248, .82) !important;
    text-align: left !important;
    background:
        linear-gradient(180deg, rgba(2, 7, 6, 0) 0, rgba(2, 7, 6, .82) 22%, #020706 100%) !important;
}
.bl-footer::before {
    content: "";
    display: block;
    height: 1px;
    margin-bottom: 1rem;
    background: linear-gradient(90deg, transparent, rgba(0, 220, 154, .54), rgba(255, 184, 0, .42), transparent);
    box-shadow: 0 0 24px rgba(0, 220, 154, .22);
}
.bl-footer-shell {
    display: grid !important;
    grid-template-columns: minmax(230px, .9fr) minmax(260px, 1.4fr) !important;
    gap: clamp(1rem, 2.8vw, 2rem) !important;
    align-items: stretch !important;
    padding: clamp(1rem, 2.8vw, 1.45rem) !important;
    border: 1px solid rgba(0, 220, 154, .22) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 10% 0%, rgba(0, 220, 154, .16), transparent 38%),
        radial-gradient(circle at 92% 110%, rgba(255, 184, 0, .10), transparent 42%),
        linear-gradient(135deg, rgba(1, 15, 10, .98), rgba(3, 34, 23, .96) 56%, rgba(1, 10, 8, .98)) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    position: relative !important;
    overflow: hidden !important;
}
.bl-footer-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 34px 34px;
    opacity: .38;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.14));
}
.bl-footer-brand,
.bl-footer-modules,
.bl-footer-bottom {
    position: relative;
    z-index: 1;
}
.bl-footer-brand {
    display: grid;
    align-content: start;
    gap: .38rem;
    padding-right: clamp(.4rem, 2vw, 1.1rem);
    border-right: 1px solid rgba(255, 255, 255, .09);
}
.bl-footer-kicker {
    width: fit-content;
    border: 1px solid rgba(255, 184, 0, .42);
    border-radius: 999px;
    background: rgba(255, 184, 0, .11);
    color: #ffcf58 !important;
    padding: .22rem .58rem;
    font-family: var(--bl-font-display);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .14em;
    line-height: 1;
    text-transform: uppercase;
}
.bl-footer-brand strong {
    color: #f5fffb !important;
    font-family: var(--bl-font-display);
    font-size: clamp(1.2rem, 2.6vw, 1.75rem);
    line-height: .98;
    letter-spacing: .045em;
    text-transform: uppercase;
    text-shadow: 0 0 18px rgba(0, 220, 154, .15);
}
.bl-footer-brand p {
    max-width: 34ch;
    margin: .1rem 0 0;
    color: rgba(224, 247, 239, .68) !important;
    font-size: .92rem;
    line-height: 1.45;
}
.bl-footer-modules {
    display: grid;
    align-content: start;
    gap: .8rem;
}
.bl-footer .moduletable,
.bl-footer .module {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.bl-footer h3,
.bl-footer .module-title {
    margin: 0 0 .6rem !important;
    color: #00dc9a !important;
    font-family: var(--bl-font-display);
    font-size: .92rem !important;
    font-weight: 950 !important;
    letter-spacing: .11em !important;
    text-transform: uppercase !important;
}
.bl-footer ul,
.bl-footer .nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .45rem .6rem !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.bl-footer li {
    margin: 0 !important;
    padding: 0 !important;
}
.bl-footer a,
.bl-footer .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 34px !important;
    border: 1px solid rgba(0, 220, 154, .24) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .045) !important;
    color: rgba(244, 255, 250, .88) !important;
    padding: .42rem .78rem !important;
    font-weight: 850 !important;
    letter-spacing: .035em !important;
    text-decoration: none !important;
    transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease !important;
}
.bl-footer a:hover,
.bl-footer a:focus-visible,
.bl-footer .nav-link:hover,
.bl-footer .nav-link:focus-visible {
    border-color: rgba(255, 184, 0, .58) !important;
    background: rgba(255, 184, 0, .12) !important;
    color: #ffcf58 !important;
    box-shadow: 0 0 18px rgba(255, 184, 0, .12) !important;
}
.bl-footer-bottom {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: center;
    justify-content: space-between;
    margin-top: .4rem;
    padding-top: .82rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: rgba(224, 247, 239, .62) !important;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .065em;
    text-transform: uppercase;
}
.bl-footer-status {
    color: #00dc9a !important;
}
.bl-footer-note {
    margin: 0 !important;
    color: rgba(224, 247, 239, .62) !important;
}
@media (max-width: 760px) {
    .bl-footer-shell {
        grid-template-columns: 1fr !important;
    }
    .bl-footer-brand {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .09);
        padding-right: 0;
        padding-bottom: .85rem;
    }
    .bl-footer-bottom {
        justify-content: flex-start;
    }
}

/* v1.0.58 - Safe footer restore: removed aggressive v1.0.54 command-center/global footer override that clipped or hid lower-page output. */

/* v1.0.58 - Dark footer rollback: restored pre-white footer styling from v1.0.55; intentionally excludes v1.0.56/v1.0.57 white/full-width footer overrides. */


/* v1.0.59 - Compact footer: remove status text, reduce vertical height only, and pull footer closer to component/sidebar body. */
.bl-footer {
    margin-top: clamp(.25rem, .8vw, .65rem) !important;
    padding: 0 0 clamp(.35rem, 1vw, .65rem) !important;
}
.bl-footer::before {
    margin-bottom: .28rem !important;
}
.bl-footer-shell {
    gap: clamp(.35rem, 1vw, .75rem) !important;
    padding: clamp(.38rem, 1vw, .62rem) clamp(.55rem, 1.5vw, .9rem) !important;
    border-radius: 12px !important;
    align-items: center !important;
}
.bl-footer-brand {
    gap: .12rem !important;
    padding-right: clamp(.28rem, 1vw, .7rem) !important;
}
.bl-footer-kicker {
    padding: .12rem .42rem !important;
    font-size: .56rem !important;
    letter-spacing: .11em !important;
}
.bl-footer-brand strong {
    font-size: clamp(.82rem, 1.45vw, 1.08rem) !important;
    line-height: .95 !important;
}
.bl-footer-brand p {
    margin: 0 !important;
    font-size: .68rem !important;
    line-height: 1.15 !important;
}
.bl-footer-modules {
    gap: .28rem !important;
}
.bl-footer h3,
.bl-footer .module-title {
    margin: 0 0 .22rem !important;
    font-size: .72rem !important;
    line-height: 1 !important;
}
.bl-footer ul,
.bl-footer .nav {
    gap: .24rem .32rem !important;
}
.bl-footer a,
.bl-footer .nav-link {
    min-height: 22px !important;
    padding: .16rem .48rem !important;
    font-size: .72rem !important;
    line-height: 1.05 !important;
}
.bl-footer-bottom {
    margin-top: .08rem !important;
    padding-top: .28rem !important;
    gap: .25rem .55rem !important;
    font-size: .62rem !important;
    line-height: 1.05 !important;
    justify-content: flex-start !important;
}
.bl-footer-status {
    display: none !important;
}
@media (max-width: 760px) {
    .bl-footer-brand {
        padding-bottom: .38rem !important;
    }
}


/* v1.0.60 - Footer polish: top-nav-shaped green buttons and darker site-green right fade. */
.bl-footer-shell {
    background:
        radial-gradient(circle at 10% 0%, rgba(0, 220, 154, .13), transparent 36%),
        radial-gradient(circle at 92% 105%, rgba(0, 128, 86, .18), transparent 44%),
        linear-gradient(135deg, rgba(1, 15, 10, .985), rgba(3, 30, 21, .97) 58%, rgba(1, 12, 9, .99)) !important;
}
.bl-footer-shell::after {
    background:
        linear-gradient(90deg, rgba(0, 220, 154, .045) 1px, transparent 1px),
        linear-gradient(0deg, rgba(0, 150, 104, .032) 1px, transparent 1px) !important;
    background-size: 34px 34px !important;
    opacity: .24 !important;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.46), rgba(0,0,0,.22)) !important;
}
.bl-footer a,
.bl-footer .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 29px !important;
    padding: .36rem .64rem !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #35f0ad !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    letter-spacing: .035em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-shadow: 2px 2px 0 rgba(0,0,0,.66) !important;
    box-shadow: none !important;
    transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}
.bl-footer a:hover,
.bl-footer a:focus-visible,
.bl-footer .nav-link:hover,
.bl-footer .nav-link:focus-visible {
    color: #04120d !important;
    border-color: rgba(0, 220, 154, .72) !important;
    background: linear-gradient(180deg, #35f0ad, #00a86f) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.30), 0 10px 24px rgba(0, 220, 154, .18) !important;
    transform: translateY(-1px) !important;
    text-shadow: none !important;
}
.bl-footer h3,
.bl-footer .module-title {
    color: #35f0ad !important;
}


/* v1.0.61 - Put footer directly under the component/sidebar with only a one-line breathing gap. */
.bl-main {
    padding-bottom: .45rem !important;
}
.bl-main > .bl-container {
    margin-bottom: 0 !important;
}
.bl-layout {
    margin-bottom: 0 !important;
}
.bl-below-content {
    margin-top: .45rem !important;
    margin-bottom: 0 !important;
}
.bl-content-card {
    margin-bottom: 0 !important;
}
.bl-footer {
    margin-top: .35rem !important;
    padding-top: 0 !important;
}
.bl-footer::before {
    margin-bottom: .18rem !important;
}


/* v1.0.62 - Hide Joomla frontend article edit/action controls on the public site.
   Content remains manageable from /administrator; this only removes frontend clutter for logged-in editors/admins. */
.bl-main .com-content-article .icons,
.bl-main .item-page .icons,
.bl-main .com-content-article .dropdown-toggle[aria-label*="Article"],
.bl-main .item-page .dropdown-toggle[aria-label*="Article"],
.bl-main .com-content-article .btn-group.float-end,
.bl-main .item-page .btn-group.float-end,
.bl-main .com-content-article .float-end > .btn-group,
.bl-main .item-page .float-end > .btn-group,
.bl-main .com-content-article__edit,
.bl-main .com-content-article [class*="edit-icon"],
.bl-main .item-page [class*="edit-icon"],
.bl-main a[href*="task=article.edit"],
.bl-main a[href*="task=articles.edit"],
.bl-main a[href*="layout=edit"],
.bl-main a[href*="contenthistory"],
.bl-main button[data-joomla-dialog*="article"],
.bl-main button[aria-label*="Edit Published Article"],
.bl-main button[title*="Edit Published Article"] {
    display: none !important;
}


/* v1.0.63 - Stronger Joomla article action dropdown suppression.
   Joomla may render the opened actions menu outside the earlier icon wrapper selectors. */
.bl-main .com-content-article .article-info + .icons,
.bl-main .item-page .article-info + .icons,
.bl-main .com-content-article .icons .dropdown-menu,
.bl-main .item-page .icons .dropdown-menu,
.bl-main .com-content-article .icons .dropdown-menu.show,
.bl-main .item-page .icons .dropdown-menu.show,
.bl-main .com-content-article .dropdown-menu:has(a[href*="task=article.edit"]),
.bl-main .item-page .dropdown-menu:has(a[href*="task=article.edit"]),
.bl-main .com-content-article .dropdown-menu:has(button[title*="Edit Published Article"]),
.bl-main .item-page .dropdown-menu:has(button[title*="Edit Published Article"]),
.bl-main .com-content-article .btn-group:has(.dropdown-menu),
.bl-main .item-page .btn-group:has(.dropdown-menu),
.bl-main .com-content-article .btn-group:has(a[href*="task=article.edit"]),
.bl-main .item-page .btn-group:has(a[href*="task=article.edit"]),
.bl-main .com-content-article .dropdown:has(a[href*="task=article.edit"]),
.bl-main .item-page .dropdown:has(a[href*="task=article.edit"]),
.bl-main .com-content-article .float-end:has(.dropdown-menu),
.bl-main .item-page .float-end:has(.dropdown-menu),
.bl-main .com-content-article .float-end:has(a[href*="task=article.edit"]),
.bl-main .item-page .float-end:has(a[href*="task=article.edit"]),
.bl-main .com-content-article .float-end:has(button[title*="Edit Published Article"]),
.bl-main .item-page .float-end:has(button[title*="Edit Published Article"]),
.bl-main .com-content-article .dropdown-menu a[href*="task=article.edit"],
.bl-main .item-page .dropdown-menu a[href*="task=article.edit"],
.bl-main .com-content-article .dropdown-menu button[title*="Edit Published Article"],
.bl-main .item-page .dropdown-menu button[title*="Edit Published Article"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* v1.0.64 - Footer restyled to match the front-page article hero panel. */
.bl-footer {
    margin-top: .55rem !important;
    padding: 0 0 clamp(.8rem, 1.8vw, 1.25rem) !important;
    background:
        linear-gradient(180deg, rgba(2, 7, 6, 0) 0, rgba(2, 7, 6, .66) 38%, #020706 100%) !important;
}
.bl-footer::before {
    height: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.bl-footer-shell {
    max-width: 1180px !important;
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) minmax(260px, .85fr) !important;
    gap: clamp(.85rem, 2vw, 1.35rem) !important;
    align-items: center !important;
    padding: clamp(.95rem, 2.1vw, 1.35rem) clamp(1rem, 2.4vw, 1.55rem) !important;
    border: 1px solid rgba(255, 190, 48, .28) !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 15% 0%, rgba(255, 176, 0, .28), transparent 30%),
        radial-gradient(circle at 92% 8%, rgba(0, 220, 154, .18), transparent 32%),
        linear-gradient(135deg, #07110d 0%, #10251b 54%, #080b07 100%) !important;
    box-shadow: 0 26px 78px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    overflow: hidden !important;
}
.bl-footer-shell::after {
    background:
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.04) 1px, transparent 1px) !important;
    background-size: 34px 34px !important;
    opacity: .22 !important;
    mask-image: none !important;
}
.bl-footer-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(0, 220, 154, .08), inset 0 1px 0 rgba(255,255,255,.08) !important;
    z-index: 1;
}
.bl-footer-brand,
.bl-footer-modules,
.bl-footer-bottom {
    position: relative !important;
    z-index: 2 !important;
}
.bl-footer-brand {
    display: grid !important;
    gap: .34rem !important;
    align-content: center !important;
    padding: 0 clamp(.85rem, 2vw, 1.25rem) 0 0 !important;
    border-right: 1px solid rgba(255,255,255,.10) !important;
}
.bl-footer-kicker {
    display: inline-flex !important;
    width: fit-content !important;
    align-items: center !important;
    padding: .36rem .62rem !important;
    border: 1px solid rgba(255,176,0,.36) !important;
    border-radius: 999px !important;
    background: rgba(255,176,0,.13) !important;
    color: #ffcf48 !important;
    box-shadow: 0 0 24px rgba(255,176,0,.10) !important;
    font-family: var(--bl-font-display) !important;
    font-size: .66rem !important;
    font-weight: 950 !important;
    letter-spacing: .14em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}
.bl-footer-brand strong {
    max-width: 17ch !important;
    color: #fff !important;
    font-family: var(--bl-font-display) !important;
    font-size: clamp(1.45rem, 3vw, 2.25rem) !important;
    line-height: .92 !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 28px rgba(255,176,0,.18) !important;
}
.bl-footer-brand p {
    width: fit-content !important;
    margin: .12rem 0 0 !important;
    padding: .36rem .68rem !important;
    border: 1px solid rgba(0,220,154,.26) !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, rgba(255,176,0,.11), rgba(0,220,154,.10), rgba(94,140,255,.10)) !important;
    color: rgba(238,248,242,.88) !important;
    font-size: .76rem !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}
.bl-footer-modules {
    align-content: center !important;
    justify-items: end !important;
    gap: .45rem !important;
}
.bl-footer h3,
.bl-footer .module-title {
    color: #ffcf48 !important;
    font-family: var(--bl-font-display) !important;
    font-size: .68rem !important;
    font-weight: 950 !important;
    letter-spacing: .13em !important;
    text-align: right !important;
    text-transform: uppercase !important;
}
.bl-footer ul,
.bl-footer .nav {
    justify-content: flex-end !important;
    gap: .36rem .42rem !important;
}
.bl-footer a,
.bl-footer .nav-link {
    min-height: 30px !important;
    padding: .38rem .68rem !important;
    border: 1px solid rgba(0,220,154,.30) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.055) !important;
    color: #35f0ad !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    letter-spacing: .045em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-shadow: 2px 2px 0 rgba(0,0,0,.58) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.bl-footer a:hover,
.bl-footer a:focus-visible,
.bl-footer .nav-link:hover,
.bl-footer .nav-link:focus-visible {
    color: #07120f !important;
    border-color: rgba(0,220,154,.78) !important;
    background: linear-gradient(180deg, #35f0ad, #00a86f) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.30), 0 12px 30px rgba(0,220,154,.18) !important;
    transform: translateY(-1px) !important;
    text-shadow: none !important;
}
.bl-footer-bottom {
    grid-column: 1 / -1 !important;
    margin-top: .18rem !important;
    padding-top: .55rem !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
    color: rgba(238,248,242,.64) !important;
    font-size: .66rem !important;
    font-weight: 900 !important;
    letter-spacing: .09em !important;
    line-height: 1.05 !important;
    text-transform: uppercase !important;
}
@media (max-width: 760px) {
    .bl-footer-shell {
        grid-template-columns: 1fr !important;
        border-radius: 22px !important;
    }
    .bl-footer-brand {
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.10) !important;
        padding: 0 0 .9rem 0 !important;
    }
    .bl-footer-modules {
        justify-items: start !important;
    }
    .bl-footer h3,
    .bl-footer .module-title {
        text-align: left !important;
    }
    .bl-footer ul,
    .bl-footer .nav {
        justify-content: flex-start !important;
    }
}


/* v1.0.65 - Footer spans the full body plus sidebar width, with restored community footer copy. */
.bl-footer > .bl-container,
.bl-footer-shell {
    width: min(1380px, calc(100% - 32px)) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.bl-footer-shell {
    grid-template-columns: minmax(360px, .95fr) minmax(360px, 1.05fr) !important;
}
.bl-footer-kicker {
    color: #ffcf48 !important;
}
.bl-footer-brand strong {
    max-width: 24ch !important;
    font-size: clamp(1.35rem, 2.35vw, 2rem) !important;
    letter-spacing: .015em !important;
}
.bl-footer-brand p {
    max-width: 42ch !important;
    border-color: rgba(0,220,154,.24) !important;
    background: linear-gradient(90deg, rgba(0,220,154,.12), rgba(255,176,0,.09), rgba(94,140,255,.08)) !important;
    color: rgba(238,248,242,.86) !important;
    font-size: .78rem !important;
    letter-spacing: .045em !important;
    text-transform: none !important;
}
.bl-footer-bottom span {
    color: rgba(238,248,242,.68) !important;
}
@media (min-width: 961px) {
    .bl-footer-shell {
        padding-left: clamp(1.15rem, 2.8vw, 1.8rem) !important;
        padding-right: clamp(1.15rem, 2.8vw, 1.8rem) !important;
    }
}
@media (max-width: 760px) {
    .bl-footer > .bl-container,
    .bl-footer-shell {
        width: min(100% - 24px, 100%) !important;
    }
    .bl-footer-shell {
        grid-template-columns: 1fr !important;
    }
}


/* v1.0.66 - Distinct site footer: same BEERLEAGUE palette, not a repeat of the hero/article card. */
.bl-footer {
    margin-top: .6rem !important;
    padding: 0 0 clamp(.85rem, 1.8vw, 1.35rem) !important;
    background:
        linear-gradient(180deg, rgba(2,7,6,0) 0, rgba(2,7,6,.42) 28%, #020706 100%) !important;
}
.bl-footer > .bl-container,
.bl-footer-shell {
    width: min(1380px, calc(100% - 32px)) !important;
    max-width: none !important;
}
.bl-footer-shell {
    grid-template-columns: minmax(320px, .8fr) minmax(380px, 1.2fr) !important;
    gap: clamp(.75rem, 1.8vw, 1.15rem) !important;
    align-items: stretch !important;
    padding: 0 !important;
    border: 1px solid rgba(0, 220, 154, .24) !important;
    border-top: 3px solid rgba(0, 220, 154, .62) !important;
    border-radius: 16px !important;
    background:
        linear-gradient(90deg, rgba(0, 220, 154, .105), transparent 22%, rgba(255, 176, 0, .055) 100%),
        linear-gradient(180deg, rgba(5, 21, 15, .98), rgba(2, 10, 8, .98)) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.055) !important;
    overflow: hidden !important;
}
.bl-footer-shell::after {
    background:
        linear-gradient(90deg, rgba(0, 220, 154, .05) 1px, transparent 1px),
        linear-gradient(0deg, rgba(0, 220, 154, .032) 1px, transparent 1px) !important;
    background-size: 28px 28px !important;
    opacity: .18 !important;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.18)) !important;
}
.bl-footer-shell::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 5px !important;
    background: linear-gradient(180deg, #35f0ad, #ffcf48) !important;
    box-shadow: 0 0 24px rgba(0,220,154,.28) !important;
    z-index: 2 !important;
}
.bl-footer-brand,
.bl-footer-modules,
.bl-footer-bottom {
    position: relative !important;
    z-index: 3 !important;
}
.bl-footer-brand {
    display: grid !important;
    align-content: center !important;
    gap: .35rem !important;
    padding: clamp(.85rem, 1.8vw, 1.15rem) clamp(.9rem, 2vw, 1.35rem) clamp(.75rem, 1.6vw, 1rem) clamp(1.15rem, 2vw, 1.55rem) !important;
    border-right: 1px solid rgba(255,255,255,.08) !important;
}
.bl-footer-kicker {
    display: inline-flex !important;
    width: fit-content !important;
    padding: .28rem .56rem !important;
    border: 1px solid rgba(0,220,154,.34) !important;
    border-radius: 8px !important;
    background: rgba(0,220,154,.10) !important;
    color: #35f0ad !important;
    box-shadow: none !important;
    font-size: .62rem !important;
    letter-spacing: .16em !important;
}
.bl-footer-brand strong {
    max-width: 28ch !important;
    color: #f5fffb !important;
    font-size: clamp(1.05rem, 1.85vw, 1.45rem) !important;
    line-height: 1.02 !important;
    letter-spacing: .035em !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 18px rgba(0,220,154,.12) !important;
}
.bl-footer-brand p {
    width: auto !important;
    max-width: 46ch !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(238,248,242,.70) !important;
    font-size: .82rem !important;
    font-weight: 750 !important;
    letter-spacing: .02em !important;
    line-height: 1.35 !important;
    text-transform: none !important;
}
.bl-footer-modules {
    display: grid !important;
    align-content: center !important;
    justify-items: end !important;
    gap: .48rem !important;
    padding: clamp(.8rem, 1.8vw, 1.12rem) clamp(.9rem, 2vw, 1.35rem) clamp(.7rem, 1.5vw, .95rem) .55rem !important;
}
.bl-footer h3,
.bl-footer .module-title {
    margin: 0 0 .34rem !important;
    color: #ffcf48 !important;
    font-size: .64rem !important;
    letter-spacing: .14em !important;
    text-align: right !important;
}
.bl-footer ul,
.bl-footer .nav {
    justify-content: flex-end !important;
    gap: .32rem .38rem !important;
}
.bl-footer a,
.bl-footer .nav-link {
    min-height: 28px !important;
    padding: .34rem .62rem !important;
    border: 1px solid rgba(0,220,154,.24) !important;
    border-radius: 7px !important;
    background: rgba(255,255,255,.042) !important;
    color: rgba(238,248,242,.86) !important;
    font-size: .68rem !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
}
.bl-footer a:hover,
.bl-footer a:focus-visible,
.bl-footer .nav-link:hover,
.bl-footer .nav-link:focus-visible {
    color: #07120f !important;
    border-color: rgba(53,240,173,.78) !important;
    background: linear-gradient(180deg, #35f0ad, #00a86f) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.28), 0 10px 22px rgba(0,220,154,.16) !important;
    transform: translateY(-1px) !important;
}
.bl-footer-bottom {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .42rem .8rem !important;
    margin: 0 !important;
    padding: .48rem clamp(.9rem, 2vw, 1.35rem) .52rem clamp(1.15rem, 2vw, 1.55rem) !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    background: rgba(0,0,0,.20) !important;
    color: rgba(238,248,242,.60) !important;
    font-size: .62rem !important;
    font-weight: 900 !important;
    letter-spacing: .09em !important;
    line-height: 1.05 !important;
    text-transform: uppercase !important;
}
.bl-footer-status-dot {
    display: inline-flex !important;
    align-items: center !important;
    gap: .32rem !important;
    color: #35f0ad !important;
}
.bl-footer-status-dot::before {
    content: "" !important;
    width: .46rem !important;
    height: .46rem !important;
    border-radius: 999px !important;
    background: #35f0ad !important;
    box-shadow: 0 0 12px rgba(53,240,173,.55) !important;
}
@media (max-width: 760px) {
    .bl-footer > .bl-container,
    .bl-footer-shell {
        width: min(100% - 24px, 100%) !important;
    }
    .bl-footer-shell {
        grid-template-columns: 1fr !important;
        border-radius: 14px !important;
    }
    .bl-footer-brand {
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
    }
    .bl-footer-modules {
        justify-items: start !important;
        padding-left: clamp(1.15rem, 2vw, 1.55rem) !important;
    }
    .bl-footer h3,
    .bl-footer .module-title {
        text-align: left !important;
    }
    .bl-footer ul,
    .bl-footer .nav {
        justify-content: flex-start !important;
    }
    .bl-footer-bottom {
        justify-content: flex-start !important;
    }
}


/* v1.0.67 - Move footer status/meta to the top and use the bottom strip for copyright. */
.bl-footer-topline {
    grid-column: 1 / -1 !important;
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .42rem .8rem !important;
    margin: 0 !important;
    padding: .48rem clamp(.9rem, 2vw, 1.35rem) .52rem clamp(1.15rem, 2vw, 1.55rem) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    background: rgba(0,0,0,.20) !important;
    color: rgba(238,248,242,.62) !important;
    font-size: .62rem !important;
    font-weight: 900 !important;
    letter-spacing: .09em !important;
    line-height: 1.05 !important;
    text-transform: uppercase !important;
}
.bl-footer-bottom {
    justify-content: center !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    background: rgba(0,0,0,.18) !important;
    color: rgba(238,248,242,.56) !important;
    text-align: center !important;
}
.bl-footer-bottom span {
    color: rgba(238,248,242,.56) !important;
    letter-spacing: .075em !important;
}
@media (max-width: 760px) {
    .bl-footer-topline {
        justify-content: flex-start !important;
    }
    .bl-footer-bottom {
        justify-content: flex-start !important;
        text-align: left !important;
    }
}


/* v1.0.69 - Footer menu is a subtle vertical utility list for About/Legal/Policy links. */
.bl-footer-modules {
    align-content: start !important;
    justify-items: stretch !important;
    padding-top: clamp(.85rem, 1.8vw, 1.15rem) !important;
    padding-bottom: clamp(.75rem, 1.6vw, 1rem) !important;
}
.bl-footer h3,
.bl-footer .module-title {
    width: 100% !important;
    margin: 0 0 .42rem !important;
    color: rgba(255,207,72,.78) !important;
    font-size: .62rem !important;
    letter-spacing: .14em !important;
    text-align: left !important;
}
.bl-footer ul,
.bl-footer .nav,
.bl-footer .menu {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .12rem !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    align-items: stretch !important;
    width: min(100%, 360px) !important;
    margin: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;
}
.bl-footer li {
    width: 100% !important;
}
.bl-footer a,
.bl-footer .nav-link {
    display: flex !important;
    width: 100% !important;
    min-height: 0 !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: .26rem .18rem .28rem .55rem !important;
    border: 0 !important;
    border-left: 2px solid rgba(0,220,154,.16) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(238,248,242,.58) !important;
    font-size: .68rem !important;
    font-weight: 850 !important;
    letter-spacing: .045em !important;
    line-height: 1.2 !important;
    text-align: left !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    transform: none !important;
}
.bl-footer a::after,
.bl-footer .nav-link::after {
    content: "›" !important;
    color: rgba(53,240,173,.34) !important;
    font-size: .86rem !important;
    line-height: 1 !important;
    margin-left: .75rem !important;
}
.bl-footer a:hover,
.bl-footer a:focus-visible,
.bl-footer .nav-link:hover,
.bl-footer .nav-link:focus-visible {
    color: rgba(245,255,251,.92) !important;
    border-left-color: rgba(53,240,173,.72) !important;
    background: linear-gradient(90deg, rgba(0,220,154,.10), transparent 82%) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
}
.bl-footer a:hover::after,
.bl-footer a:focus-visible::after,
.bl-footer .nav-link:hover::after,
.bl-footer .nav-link:focus-visible::after {
    color: rgba(255,207,72,.72) !important;
}
@media (max-width: 760px) {
    .bl-footer ul,
    .bl-footer .nav,
    .bl-footer .menu {
        width: 100% !important;
        margin-left: 0 !important;
    }
}


/* v1.0.70 - Remove center divider between footer identity copy and vertical utility menu. */
.bl-footer-brand {
    border-right: 0 !important;
}
@media (max-width: 760px) {
    .bl-footer-brand {
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
    }
}


/* v1.0.71 - Remove remaining subtle internal footer seams/grid lines near the identity copy. */
.bl-footer-shell::after {
    content: none !important;
    display: none !important;
    background: none !important;
    opacity: 0 !important;
}
.bl-footer-brand,
.bl-footer-modules {
    border-left: 0 !important;
    border-right: 0 !important;
}
.bl-footer-brand {
    border-bottom: 0 !important;
}
@media (max-width: 760px) {
    .bl-footer-brand {
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
    }
}


/* v1.0.72 - BEERLEAGUE facelift for default Joomla com_users profile/account pages. */
.bl-main .com-users-profile,
.bl-main .profile:not(.profile-edit),
.bl-main .com-users-login,
.bl-main .com-users-reset,
.bl-main .com-users-remind,
.bl-main .com-users-registration,
.bl-main .logout {
    max-width: 1040px !important;
    margin-inline: auto !important;
    color: rgba(238,248,242,.88) !important;
}
.bl-main .com-users-profile > h1,
.bl-main .com-users-profile .page-header h1,
.bl-main .profile:not(.profile-edit) > h1,
.bl-main .profile:not(.profile-edit) .page-header h1,
.bl-main .com-users-login > h1,
.bl-main .com-users-login .page-header h1,
.bl-main .com-users-reset > h1,
.bl-main .com-users-reset .page-header h1,
.bl-main .com-users-remind > h1,
.bl-main .com-users-remind .page-header h1 {
    margin: 0 0 .85rem !important;
    padding: .78rem 1rem !important;
    border: 1px solid rgba(255,190,48,.24) !important;
    border-radius: 16px !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(255,176,0,.16), transparent 32%),
        radial-gradient(circle at 100% 0%, rgba(0,220,154,.13), transparent 34%),
        linear-gradient(135deg, rgba(5,21,15,.98), rgba(2,10,8,.98)) !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06) !important;
    color: #fff !important;
    font-family: var(--bl-font-display) !important;
    font-size: clamp(1.18rem, 2vw, 1.72rem) !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 22px rgba(0,220,154,.12) !important;
}
.bl-main .com-users-profile > h1::before,
.bl-main .com-users-profile .page-header h1::before,
.bl-main .profile:not(.profile-edit) > h1::before,
.bl-main .profile:not(.profile-edit) .page-header h1::before {
    content: "PLAYER ACCOUNT" !important;
    display: block !important;
    width: fit-content !important;
    margin: 0 0 .35rem !important;
    padding: .22rem .52rem !important;
    border: 1px solid rgba(0,220,154,.28) !important;
    border-radius: 999px !important;
    background: rgba(0,220,154,.09) !important;
    color: #35f0ad !important;
    font-size: .58rem !important;
    letter-spacing: .15em !important;
    line-height: 1 !important;
    text-shadow: none !important;
}
.bl-main .com-users-profile fieldset,
.bl-main .profile:not(.profile-edit) fieldset,
.bl-main #users-profile-core,
.bl-main #users-profile-custom,
.bl-main #users-profile-custom fieldset,
.bl-main #users-profile-core fieldset,
.bl-main .com-users-login form,
.bl-main .com-users-reset form,
.bl-main .com-users-remind form,
.bl-main .logout form {
    position: relative !important;
    margin: 0 0 .85rem !important;
    padding: .9rem 1rem !important;
    border: 1px solid rgba(0,220,154,.22) !important;
    border-top: 2px solid rgba(0,220,154,.42) !important;
    border-radius: 16px !important;
    background:
        linear-gradient(90deg, rgba(0,220,154,.065), transparent 26%, rgba(255,176,0,.035) 100%),
        linear-gradient(180deg, rgba(5,21,15,.96), rgba(2,10,8,.97)) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05) !important;
    color: rgba(238,248,242,.86) !important;
    overflow: hidden !important;
}
.bl-main .com-users-profile fieldset::before,
.bl-main .profile:not(.profile-edit) fieldset::before,
.bl-main #users-profile-core::before,
.bl-main #users-profile-custom::before,
.bl-main #users-profile-custom fieldset::before,
.bl-main #users-profile-core fieldset::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    background: linear-gradient(180deg, #35f0ad, rgba(255,207,72,.72)) !important;
    opacity: .75 !important;
}
.bl-main .com-users-profile legend,
.bl-main .profile:not(.profile-edit) legend,
.bl-main #users-profile-core legend,
.bl-main #users-profile-custom legend {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 0 .72rem !important;
    padding: .28rem .62rem !important;
    border: 1px solid rgba(255,207,72,.32) !important;
    border-radius: 999px !important;
    background: rgba(255,176,0,.10) !important;
    color: #ffcf48 !important;
    font-size: .68rem !important;
    font-weight: 950 !important;
    letter-spacing: .13em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}
.bl-main .com-users-profile dl,
.bl-main .profile:not(.profile-edit) dl,
.bl-main #users-profile-core dl,
.bl-main #users-profile-custom dl,
.bl-main .com-users-profile .dl-horizontal,
.bl-main .profile:not(.profile-edit) .dl-horizontal {
    display: grid !important;
    grid-template-columns: minmax(145px, 220px) minmax(0, 1fr) !important;
    gap: 0 !important;
    margin: 0 !important;
}
.bl-main .com-users-profile dt,
.bl-main .profile:not(.profile-edit) dt,
.bl-main #users-profile-core dt,
.bl-main #users-profile-custom dt,
.bl-main .com-users-profile dd,
.bl-main .profile:not(.profile-edit) dd,
.bl-main #users-profile-core dd,
.bl-main #users-profile-custom dd {
    min-height: 38px !important;
    margin: 0 !important;
    padding: .52rem .62rem !important;
    border-bottom: 1px solid rgba(255,255,255,.065) !important;
    color: rgba(238,248,242,.82) !important;
    line-height: 1.35 !important;
}
.bl-main .com-users-profile dt,
.bl-main .profile:not(.profile-edit) dt,
.bl-main #users-profile-core dt,
.bl-main #users-profile-custom dt {
    color: rgba(53,240,173,.80) !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    letter-spacing: .075em !important;
    text-transform: uppercase !important;
}
.bl-main .com-users-profile dd,
.bl-main .profile:not(.profile-edit) dd,
.bl-main #users-profile-core dd,
.bl-main #users-profile-custom dd {
    min-width: 0 !important;
    color: rgba(245,255,251,.92) !important;
    font-size: .88rem !important;
    font-weight: 750 !important;
    overflow-wrap: anywhere !important;
}
.bl-main .com-users-profile dt:last-of-type,
.bl-main .profile:not(.profile-edit) dt:last-of-type,
.bl-main #users-profile-core dt:last-of-type,
.bl-main #users-profile-custom dt:last-of-type,
.bl-main .com-users-profile dd:last-of-type,
.bl-main .profile:not(.profile-edit) dd:last-of-type,
.bl-main #users-profile-core dd:last-of-type,
.bl-main #users-profile-custom dd:last-of-type {
    border-bottom: 0 !important;
}
.bl-main .com-users-profile .btn,
.bl-main .profile:not(.profile-edit) .btn,
.bl-main .com-users-login .btn,
.bl-main .com-users-reset .btn,
.bl-main .com-users-remind .btn,
.bl-main .logout .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    padding: .46rem .78rem !important;
    border: 1px solid rgba(0,220,154,.34) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(53,240,173,.18), rgba(0,168,111,.16)) !important;
    color: #35f0ad !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    letter-spacing: .06em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.18) !important;
}
.bl-main .com-users-profile .btn:hover,
.bl-main .profile:not(.profile-edit) .btn:hover,
.bl-main .com-users-login .btn:hover,
.bl-main .com-users-reset .btn:hover,
.bl-main .com-users-remind .btn:hover,
.bl-main .logout .btn:hover,
.bl-main .com-users-profile .btn:focus-visible,
.bl-main .profile:not(.profile-edit) .btn:focus-visible,
.bl-main .com-users-login .btn:focus-visible,
.bl-main .com-users-reset .btn:focus-visible,
.bl-main .com-users-remind .btn:focus-visible,
.bl-main .logout .btn:focus-visible {
    color: #07120f !important;
    border-color: rgba(53,240,173,.78) !important;
    background: linear-gradient(180deg, #35f0ad, #00a86f) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.28), 0 12px 30px rgba(0,220,154,.16) !important;
}
.bl-main .com-users-login input[type="text"],
.bl-main .com-users-login input[type="password"],
.bl-main .com-users-login input[type="email"],
.bl-main .com-users-reset input[type="text"],
.bl-main .com-users-reset input[type="password"],
.bl-main .com-users-reset input[type="email"],
.bl-main .com-users-remind input[type="text"],
.bl-main .com-users-remind input[type="password"],
.bl-main .com-users-remind input[type="email"] {
    min-height: 38px !important;
    padding: .5rem .72rem !important;
    border: 1px solid rgba(0,220,154,.24) !important;
    border-radius: 10px !important;
    background: rgba(247,250,248,.96) !important;
    color: #101714 !important;
    box-shadow: inset 0 1px rgba(255,255,255,.7) !important;
}
.bl-main .com-users-profile .alert,
.bl-main .profile:not(.profile-edit) .alert,
.bl-main .com-users-login .alert,
.bl-main .com-users-reset .alert,
.bl-main .com-users-remind .alert {
    border-radius: 14px !important;
    border-color: rgba(255,207,72,.34) !important;
    background: rgba(255,176,0,.10) !important;
    color: rgba(255,245,210,.92) !important;
}
@media (max-width: 760px) {
    .bl-main .com-users-profile dl,
    .bl-main .profile:not(.profile-edit) dl,
    .bl-main #users-profile-core dl,
    .bl-main #users-profile-custom dl,
    .bl-main .com-users-profile .dl-horizontal,
    .bl-main .profile:not(.profile-edit) .dl-horizontal {
        grid-template-columns: 1fr !important;
    }
    .bl-main .com-users-profile dt,
    .bl-main .profile:not(.profile-edit) dt,
    .bl-main #users-profile-core dt,
    .bl-main #users-profile-custom dt {
        min-height: 0 !important;
        padding-bottom: .12rem !important;
        border-bottom: 0 !important;
    }
    .bl-main .com-users-profile dd,
    .bl-main .profile:not(.profile-edit) dd,
    .bl-main #users-profile-core dd,
    .bl-main #users-profile-custom dd {
        padding-top: .1rem !important;
    }
}


/* v1.0.73 - Move Joomla profile Edit Profile action to the bottom action bar. */
.bl-main .bl-user-profile-view > .btn-toolbar,
.bl-main .bl-user-profile-view > .com-users-profile__edit,
.bl-main .com-users-profile.profile > .btn-toolbar,
.bl-main .com-users-profile.profile > .com-users-profile__edit,
.bl-main .profile:not(.profile-edit) > .btn-toolbar,
.bl-main .profile:not(.profile-edit) > .com-users-profile__edit {
    display: none !important;
}
.bl-main .bl-user-profile-sections {
    display: grid !important;
    gap: .85rem !important;
}
.bl-main .bl-profile-bottom-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: .55rem !important;
    margin-top: .95rem !important;
    padding: .72rem .85rem !important;
    border: 1px solid rgba(0,220,154,.18) !important;
    border-radius: 14px !important;
    background: linear-gradient(90deg, rgba(0,220,154,.075), rgba(255,176,0,.045), transparent) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
}
.bl-main .bl-profile-edit-bottom-btn {
    width: auto !important;
    min-width: 150px !important;
}
@media (max-width: 760px) {
    .bl-main .bl-profile-bottom-actions {
        justify-content: stretch !important;
    }
    .bl-main .bl-profile-edit-bottom-btn {
        width: 100% !important;
    }
}


/* v1.0.74 - Steam avatar identity strip on the Joomla profile display page. */
.bl-main .bl-profile-view-steam-strip {
    margin: 0 0 .9rem !important;
    border-color: rgba(255,207,72,.26) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(255,176,0,.13), transparent 34%),
        linear-gradient(90deg, rgba(0,220,154,.09), rgba(0,0,0,.18)) !important;
}
.bl-main .bl-user-profile-view .bl-profile-steam-avatar img,
.bl-main .bl-user-profile-view .bl-profile-steam-avatar span {
    box-shadow: 0 0 0 2px rgba(53,240,173,.18), 0 14px 28px rgba(0,0,0,.24) !important;
}
.bl-main .bl-user-profile-view .bl-profile-steam-actions {
    justify-content: flex-end !important;
}
@media (max-width: 760px) {
    .bl-main .bl-profile-view-steam-strip {
        grid-template-columns: auto minmax(0, 1fr) !important;
    }
    .bl-main .bl-user-profile-view .bl-profile-steam-actions {
        grid-column: 1 / -1 !important;
        justify-content: stretch !important;
    }
    .bl-main .bl-user-profile-view .bl-profile-steam-actions .btn {
        width: 100% !important;
    }
}


/* v1.0.75 - Make Profile and Basic Settings account cards span the full profile tile width. */
#member-profile.bl-user-profile-form .bl-profile-card-primary,
#member-profile.bl-user-profile-form .bl-profile-card-profile,
#member-profile.bl-user-profile-form .bl-profile-card-basic,
#member-profile.bl-user-profile-form .bl-profile-card-basic-settings,
#member-profile.bl-user-profile-form .bl-profile-card-params,
#member-profile.bl-user-profile-form .bl-profile-card-settings,
#member-profile.bl-user-profile-form .bl-profile-card-com-users-profile,
#member-profile.bl-user-profile-form .bl-profile-card-com-users-params {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
}
#member-profile.bl-user-profile-form .bl-profile-card-primary .bl-profile-steam-strip,
#member-profile.bl-user-profile-form .bl-profile-card-profile .bl-profile-steam-strip {
    grid-template-columns: 46px minmax(0, 1fr) auto !important;
    width: 100% !important;
}
#member-profile.bl-user-profile-form .bl-profile-card-primary .bl-profile-steam-actions,
#member-profile.bl-user-profile-form .bl-profile-card-profile .bl-profile-steam-actions,
.bl-main .bl-user-profile-view .bl-profile-steam-actions {
    margin-left: auto !important;
    justify-content: flex-end !important;
}
#member-profile.bl-user-profile-form .bl-profile-card-primary .controls,
#member-profile.bl-user-profile-form .bl-profile-card-profile .controls,
#member-profile.bl-user-profile-form .bl-profile-card-basic .controls,
#member-profile.bl-user-profile-form .bl-profile-card-basic-settings .controls,
#member-profile.bl-user-profile-form .bl-profile-card-params .controls,
#member-profile.bl-user-profile-form .bl-profile-card-settings .controls {
    max-width: none !important;
    width: 100% !important;
}
.bl-main .com-users-profile fieldset,
.bl-main .profile:not(.profile-edit) fieldset,
.bl-main #users-profile-core,
.bl-main #users-profile-custom {
    width: 100% !important;
    max-width: none !important;
}
.bl-main .bl-user-profile-sections > * {
    width: 100% !important;
    max-width: none !important;
}
@media (max-width: 620px) {
    #member-profile.bl-user-profile-form .bl-profile-card-primary .bl-profile-steam-strip,
    #member-profile.bl-user-profile-form .bl-profile-card-profile .bl-profile-steam-strip {
        grid-template-columns: 40px minmax(0, 1fr) !important;
    }
    #member-profile.bl-user-profile-form .bl-profile-card-primary .bl-profile-steam-actions,
    #member-profile.bl-user-profile-form .bl-profile-card-profile .bl-profile-steam-actions {
        grid-column: 1 / -1 !important;
        justify-content: flex-start !important;
        margin-left: 0 !important;
    }
}


/* v1.0.76 - Dock Steam identity/avatar to the right side of the Profile card on desktop. */
@media (min-width: 781px) {
    #member-profile.bl-user-profile-form .bl-profile-card-primary,
    #member-profile.bl-user-profile-form .bl-profile-card-profile {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) !important;
        grid-template-areas:
            "legend steam"
            "desc steam"
            "fields steam" !important;
        column-gap: .9rem !important;
        align-items: start !important;
    }
    #member-profile.bl-user-profile-form .bl-profile-card-primary > legend,
    #member-profile.bl-user-profile-form .bl-profile-card-profile > legend {
        grid-area: legend !important;
        align-self: start !important;
        justify-self: start !important;
    }
    #member-profile.bl-user-profile-form .bl-profile-card-primary > .bl-profile-fieldset-desc,
    #member-profile.bl-user-profile-form .bl-profile-card-profile > .bl-profile-fieldset-desc {
        grid-area: desc !important;
    }
    #member-profile.bl-user-profile-form .bl-profile-card-primary > .bl-profile-steam-strip,
    #member-profile.bl-user-profile-form .bl-profile-card-profile > .bl-profile-steam-strip {
        grid-area: steam !important;
        align-self: start !important;
        justify-self: stretch !important;
        width: 100% !important;
        margin: 0 !important;
        padding: .72rem !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        text-align: center !important;
        position: sticky !important;
        top: .75rem !important;
    }
    #member-profile.bl-user-profile-form .bl-profile-card-primary > .bl-field-row,
    #member-profile.bl-user-profile-form .bl-profile-card-profile > .bl-field-row,
    #member-profile.bl-user-profile-form .bl-profile-card-primary > .control-group,
    #member-profile.bl-user-profile-form .bl-profile-card-profile > .control-group {
        grid-column: 1 !important;
        width: 100% !important;
    }
    #member-profile.bl-user-profile-form .bl-profile-card-primary .bl-profile-steam-avatar,
    #member-profile.bl-user-profile-form .bl-profile-card-profile .bl-profile-steam-avatar {
        width: 86px !important;
        height: 86px !important;
        border-radius: 18px !important;
        font-size: 2rem !important;
    }
    #member-profile.bl-user-profile-form .bl-profile-card-primary .bl-profile-steam-copy,
    #member-profile.bl-user-profile-form .bl-profile-card-profile .bl-profile-steam-copy {
        justify-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }
    #member-profile.bl-user-profile-form .bl-profile-card-primary .bl-profile-steam-copy strong,
    #member-profile.bl-user-profile-form .bl-profile-card-profile .bl-profile-steam-copy strong {
        font-size: .92rem !important;
        white-space: normal !important;
    }
    #member-profile.bl-user-profile-form .bl-profile-card-primary .bl-profile-steam-copy span,
    #member-profile.bl-user-profile-form .bl-profile-card-profile .bl-profile-steam-copy span {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
    #member-profile.bl-user-profile-form .bl-profile-card-primary .bl-profile-steam-actions,
    #member-profile.bl-user-profile-form .bl-profile-card-profile .bl-profile-steam-actions {
        width: 100% !important;
        margin-left: 0 !important;
        justify-content: center !important;
    }
    #member-profile.bl-user-profile-form .bl-profile-card-primary .bl-profile-steam-actions .btn,
    #member-profile.bl-user-profile-form .bl-profile-card-profile .bl-profile-steam-actions .btn {
        flex: 1 1 0 !important;
        min-width: 86px !important;
        justify-content: center !important;
    }
}
@media (max-width: 780px) {
    #member-profile.bl-user-profile-form .bl-profile-card-primary,
    #member-profile.bl-user-profile-form .bl-profile-card-profile {
        display: block !important;
    }
    #member-profile.bl-user-profile-form .bl-profile-card-primary .bl-profile-steam-strip,
    #member-profile.bl-user-profile-form .bl-profile-card-profile .bl-profile-steam-strip {
        position: static !important;
        margin: -.12rem 0 .5rem !important;
    }
}


/* v1.0.77 - Profile details and Steam identity sit parallel in the first profile row. */
.bl-main .bl-user-profile-view .bl-profile-display-toprow {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 230px) !important;
    align-items: stretch !important;
    gap: .85rem !important;
    width: 100% !important;
    margin: 0 0 .85rem !important;
}
.bl-main .bl-user-profile-view .bl-profile-display-core,
.bl-main .bl-user-profile-view .bl-profile-display-core > * {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
}
.bl-main .bl-user-profile-view .bl-profile-display-core #users-profile-core {
    height: 100% !important;
    margin: 0 !important;
}
.bl-main .bl-user-profile-view .bl-profile-display-toprow .bl-profile-view-steam-strip {
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .55rem !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: .82rem .72rem !important;
    text-align: center !important;
    border: 1px solid rgba(0,220,154,.34) !important;
    border-left: 4px solid rgba(255,207,72,.92) !important;
    border-radius: 14px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,176,0,.16), transparent 42%),
        linear-gradient(180deg, rgba(0, 38, 25, .84), rgba(0, 13, 10, .78)) !important;
}
.bl-main .bl-user-profile-view .bl-profile-display-toprow .bl-profile-steam-avatar {
    width: 112px !important;
    height: 112px !important;
    border-radius: 18px !important;
    font-size: 2.35rem !important;
}
.bl-main .bl-user-profile-view .bl-profile-display-toprow .bl-profile-steam-copy {
    width: 100% !important;
    justify-items: center !important;
    text-align: center !important;
}
.bl-main .bl-user-profile-view .bl-profile-display-toprow .bl-profile-steam-copy strong {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}
.bl-main .bl-user-profile-view .bl-profile-display-toprow .bl-profile-steam-copy span {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}
.bl-main .bl-user-profile-view .bl-profile-display-toprow .bl-profile-steam-actions {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-left: 0 !important;
}
.bl-main .bl-user-profile-view .bl-profile-display-toprow .bl-profile-steam-actions .btn {
    flex: 1 1 0 !important;
    justify-content: center !important;
    min-width: 0 !important;
}
@media (max-width: 820px) {
    .bl-main .bl-user-profile-view .bl-profile-display-toprow {
        grid-template-columns: 1fr !important;
    }
    .bl-main .bl-user-profile-view .bl-profile-display-toprow .bl-profile-view-steam-strip {
        min-height: 0 !important;
    }
    .bl-main .bl-user-profile-view .bl-profile-display-toprow .bl-profile-steam-avatar {
        width: 84px !important;
        height: 84px !important;
    }
}


/* v1.0.78 - Apply profile parallel identity layout to Edit Profile and Registration. */
#member-profile.bl-user-profile-form .bl-profile-edit-toprow,
#member-registration.bl-user-registration-form .bl-registration-toprow {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 230px) !important;
    align-items: stretch !important;
    gap: .85rem !important;
    width: 100% !important;
    margin: 0 0 .85rem !important;
}
#member-profile.bl-user-profile-form .bl-profile-edit-primary-card,
#member-registration.bl-user-registration-form .bl-registration-primary-card {
    grid-column: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
}
#member-profile.bl-user-profile-form .bl-profile-edit-steam-panel,
#member-registration.bl-user-registration-form .bl-registration-side-panel {
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .55rem !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: .82rem .72rem !important;
    text-align: center !important;
    border: 1px solid rgba(0,220,154,.34) !important;
    border-left: 4px solid rgba(255,207,72,.92) !important;
    border-radius: 14px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,176,0,.16), transparent 42%),
        linear-gradient(180deg, rgba(0, 38, 25, .84), rgba(0, 13, 10, .78)) !important;
}
#member-profile.bl-user-profile-form .bl-profile-edit-toprow .bl-profile-steam-avatar {
    width: 112px !important;
    height: 112px !important;
    border-radius: 18px !important;
    font-size: 2.35rem !important;
}
#member-profile.bl-user-profile-form .bl-profile-edit-toprow .bl-profile-steam-copy,
#member-registration.bl-user-registration-form .bl-registration-side-panel .bl-registration-copy {
    width: 100% !important;
    justify-items: center !important;
    text-align: center !important;
}
#member-profile.bl-user-profile-form .bl-profile-edit-toprow .bl-profile-steam-copy strong,
#member-profile.bl-user-profile-form .bl-profile-edit-toprow .bl-profile-steam-copy span,
#member-registration.bl-user-registration-form .bl-registration-side-panel .bl-registration-copy strong,
#member-registration.bl-user-registration-form .bl-registration-side-panel .bl-registration-copy span {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}
#member-profile.bl-user-profile-form .bl-profile-edit-toprow .bl-profile-steam-actions {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-left: 0 !important;
}
#member-profile.bl-user-profile-form .bl-profile-edit-toprow .bl-profile-steam-actions .btn {
    flex: 1 1 0 !important;
    justify-content: center !important;
    min-width: 0 !important;
}
#member-registration.bl-user-registration-form .bl-registration-side-panel .bl-registration-icon {
    display: grid !important;
    place-items: center !important;
    width: 112px !important;
    height: 112px !important;
    border: 1px solid rgba(255, 173, 24, .55) !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, rgba(255,173,24,.18), rgba(0,220,154,.12)), rgba(0,0,0,.30) !important;
    color: var(--bl-logo-orange-bright) !important;
    font-size: 2rem !important;
    font-weight: 950 !important;
    letter-spacing: .035em !important;
    box-shadow: 0 0 0 2px rgba(53,240,173,.18), 0 14px 28px rgba(0,0,0,.24) !important;
}
#member-registration.bl-user-registration-form .bl-registration-side-panel .bl-registration-mini-notes {
    display: grid !important;
    gap: .45rem !important;
    width: 100% !important;
    margin-top: .1rem !important;
}
#member-registration.bl-user-registration-form .bl-registration-side-panel .bl-registration-mini-notes > div {
    padding: .48rem .52rem !important;
    border: 1px solid rgba(0,220,154,.20) !important;
    border-radius: 10px !important;
    background: rgba(0,0,0,.18) !important;
}
@media (max-width: 820px) {
    #member-profile.bl-user-profile-form .bl-profile-edit-toprow,
    #member-registration.bl-user-registration-form .bl-registration-toprow {
        grid-template-columns: 1fr !important;
    }
    #member-profile.bl-user-profile-form .bl-profile-edit-steam-panel,
    #member-registration.bl-user-registration-form .bl-registration-side-panel {
        min-height: 0 !important;
    }
    #member-profile.bl-user-profile-form .bl-profile-edit-toprow .bl-profile-steam-avatar,
    #member-registration.bl-user-registration-form .bl-registration-side-panel .bl-registration-icon {
        width: 84px !important;
        height: 84px !important;
    }
}


/* v1.0.79 - Make Registration and Edit Profile visually match the finished User Profile page. */
.bl-main .bl-account-unified-page {
    max-width: 1040px !important;
    margin-inline: auto !important;
    padding: 1rem !important;
    border: 1px solid rgba(0,220,154,.36) !important;
    border-left: 4px solid rgba(53,240,173,.92) !important;
    border-radius: 10px !important;
    background:
        linear-gradient(rgba(0,220,154,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,220,154,.045) 1px, transparent 1px),
        radial-gradient(circle at 100% 0%, rgba(255,176,0,.13), transparent 34%),
        linear-gradient(180deg, rgba(0, 44, 29, .88), rgba(0, 12, 9, .94)) !important;
    background-size: 32px 32px, 32px 32px, auto, auto !important;
    color: rgba(238,248,242,.90) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.055) !important;
}
.bl-main .bl-account-unified-page .page-header,
.bl-main .bl-account-unified-page .bl-profile-generated-heading {
    margin: 0 0 .9rem !important;
    padding: 0 !important;
    border: 0 !important;
}
.bl-main .bl-account-unified-page .page-header h1,
.bl-main .bl-account-unified-page .bl-profile-generated-heading h1 {
    margin: 0 !important;
    padding: .78rem 1rem !important;
    border: 1px solid rgba(255,190,48,.24) !important;
    border-radius: 16px !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(255,176,0,.16), transparent 32%),
        radial-gradient(circle at 100% 0%, rgba(0,220,154,.13), transparent 34%),
        linear-gradient(135deg, rgba(5,21,15,.98), rgba(2,10,8,.98)) !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06) !important;
    color: #fff !important;
    font-family: var(--bl-font-display) !important;
    font-size: clamp(1.18rem, 2vw, 1.72rem) !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 22px rgba(0,220,154,.12) !important;
}
.bl-main .bl-account-unified-page .page-header h1::before,
.bl-main .bl-account-unified-page .bl-profile-generated-heading h1::before {
    content: "PLAYER ACCOUNT" !important;
    display: block !important;
    width: fit-content !important;
    margin: 0 0 .35rem !important;
    padding: .22rem .52rem !important;
    border: 1px solid rgba(0,220,154,.28) !important;
    border-radius: 999px !important;
    background: rgba(0,220,154,.09) !important;
    color: #35f0ad !important;
    font-size: .58rem !important;
    letter-spacing: .15em !important;
    line-height: 1 !important;
    text-shadow: none !important;
}
.bl-main .bl-account-unified-page form,
.bl-main .bl-account-unified-page .bl-profile-display-toprow,
.bl-main .bl-account-unified-page .bl-user-profile-sections,
.bl-main .bl-account-unified-page .bl-profile-grid {
    width: 100% !important;
    max-width: none !important;
}
.bl-main .bl-account-unified-page .bl-profile-display-toprow,
#member-profile.bl-user-profile-form .bl-profile-display-toprow,
#member-registration.bl-user-registration-form .bl-profile-display-toprow {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 230px) !important;
    gap: .85rem !important;
    margin: 0 0 .85rem !important;
}
.bl-main .bl-account-unified-page .bl-profile-display-core,
.bl-main .bl-account-unified-page .bl-profile-display-core > fieldset {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
}
.bl-main .bl-account-unified-page .bl-profile-card,
.bl-main .bl-account-unified-page fieldset.bl-profile-card,
#member-profile.bl-user-profile-form .bl-profile-card,
#member-registration.bl-user-registration-form .bl-profile-card {
    position: relative !important;
    box-sizing: border-box !important;
    margin: 0 0 .85rem !important;
    padding: .9rem 1rem !important;
    border: 1px solid rgba(0,220,154,.22) !important;
    border-top: 2px solid rgba(0,220,154,.42) !important;
    border-radius: 16px !important;
    background:
        linear-gradient(90deg, rgba(0,220,154,.065), transparent 26%, rgba(255,176,0,.035) 100%),
        linear-gradient(180deg, rgba(5,21,15,.96), rgba(2,10,8,.97)) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05) !important;
    color: rgba(238,248,242,.86) !important;
    overflow: hidden !important;
}
.bl-main .bl-account-unified-page .bl-profile-card::before,
#member-profile.bl-user-profile-form .bl-profile-card::before,
#member-registration.bl-user-registration-form .bl-profile-card::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    background: linear-gradient(180deg, #35f0ad, rgba(255,207,72,.72)) !important;
    opacity: .75 !important;
}
.bl-main .bl-account-unified-page .bl-profile-card legend,
#member-profile.bl-user-profile-form .bl-profile-card legend,
#member-registration.bl-user-registration-form .bl-profile-card legend {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    margin: -.18rem 0 .72rem !important;
    padding: .28rem .62rem !important;
    border: 1px solid rgba(255,207,72,.32) !important;
    border-radius: 999px !important;
    background: rgba(255,176,0,.10) !important;
    color: #ffcf48 !important;
    font-size: .68rem !important;
    font-weight: 950 !important;
    letter-spacing: .13em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}
.bl-main .bl-account-unified-page .bl-field-row,
.bl-main .bl-account-unified-page .control-group,
#member-profile.bl-user-profile-form .bl-field-row,
#member-profile.bl-user-profile-form .control-group,
#member-registration.bl-user-registration-form .bl-field-row,
#member-registration.bl-user-registration-form .control-group {
    display: grid !important;
    grid-template-columns: minmax(145px, 220px) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0 !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.065) !important;
}
.bl-main .bl-account-unified-page .control-label,
.bl-main .bl-account-unified-page .control-label label,
.bl-main .bl-account-unified-page label,
#member-profile.bl-user-profile-form .control-label,
#member-profile.bl-user-profile-form .control-label label,
#member-registration.bl-user-registration-form .control-label,
#member-registration.bl-user-registration-form .control-label label {
    margin: 0 !important;
    padding: .52rem .62rem !important;
    color: rgba(53,240,173,.80) !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    letter-spacing: .075em !important;
    line-height: 1.35 !important;
    text-transform: uppercase !important;
}
.bl-main .bl-account-unified-page .controls,
#member-profile.bl-user-profile-form .controls,
#member-registration.bl-user-registration-form .controls {
    min-width: 0 !important;
    width: 100% !important;
    padding: .28rem .62rem !important;
}
.bl-main .bl-account-unified-page input[type="text"],
.bl-main .bl-account-unified-page input[type="password"],
.bl-main .bl-account-unified-page input[type="email"],
.bl-main .bl-account-unified-page input[type="url"],
.bl-main .bl-account-unified-page input[type="tel"],
.bl-main .bl-account-unified-page input[type="number"],
.bl-main .bl-account-unified-page select,
.bl-main .bl-account-unified-page textarea {
    min-height: 34px !important;
    width: 100% !important;
    padding: .42rem .58rem !important;
    border: 1px solid rgba(0,220,154,.22) !important;
    border-radius: 8px !important;
    background: rgba(0,0,0,.18) !important;
    color: rgba(245,255,251,.94) !important;
    font-size: .84rem !important;
    font-weight: 750 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.bl-main .bl-account-unified-page .bl-profile-view-steam-strip,
.bl-main .bl-account-unified-page .bl-profile-edit-steam-panel,
.bl-main .bl-account-unified-page .bl-registration-side-panel {
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .55rem !important;
    width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: .82rem .72rem !important;
    text-align: center !important;
    border: 1px solid rgba(0,220,154,.34) !important;
    border-left: 4px solid rgba(255,207,72,.92) !important;
    border-radius: 14px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,176,0,.16), transparent 42%),
        linear-gradient(180deg, rgba(0, 38, 25, .84), rgba(0, 13, 10, .78)) !important;
}
.bl-main .bl-account-unified-page .bl-profile-steam-avatar,
.bl-main .bl-account-unified-page .bl-registration-icon {
    display: grid !important;
    place-items: center !important;
    width: 112px !important;
    height: 112px !important;
    border: 1px solid rgba(255, 173, 24, .55) !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, rgba(255,173,24,.18), rgba(0,220,154,.12)), rgba(0,0,0,.30) !important;
    color: var(--bl-logo-orange-bright) !important;
    font-size: 2rem !important;
    font-weight: 950 !important;
    box-shadow: 0 0 0 2px rgba(53,240,173,.18), 0 14px 28px rgba(0,0,0,.24) !important;
}
.bl-main .bl-account-unified-page .bl-profile-steam-actions,
.bl-main .bl-account-unified-page .bl-registration-mini-notes {
    width: 100% !important;
}
.bl-main .bl-account-unified-page .bl-profile-actions-bar,
.bl-main .bl-account-unified-page .bl-registration-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: .55rem !important;
    margin-top: .95rem !important;
    padding: .72rem .85rem !important;
    border: 1px solid rgba(0,220,154,.18) !important;
    border-radius: 14px !important;
    background: linear-gradient(90deg, rgba(0,220,154,.075), rgba(255,176,0,.045), transparent) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
}
@media (max-width: 820px) {
    .bl-main .bl-account-unified-page .bl-profile-display-toprow,
    #member-profile.bl-user-profile-form .bl-profile-display-toprow,
    #member-registration.bl-user-registration-form .bl-profile-display-toprow {
        grid-template-columns: 1fr !important;
    }
}
@media (max-width: 760px) {
    .bl-main .bl-account-unified-page {
        padding: .75rem !important;
    }
    .bl-main .bl-account-unified-page .bl-field-row,
    .bl-main .bl-account-unified-page .control-group,
    #member-profile.bl-user-profile-form .bl-field-row,
    #member-profile.bl-user-profile-form .control-group,
    #member-registration.bl-user-registration-form .bl-field-row,
    #member-registration.bl-user-registration-form .control-group {
        grid-template-columns: 1fr !important;
    }
    .bl-main .bl-account-unified-page .controls {
        padding-top: .1rem !important;
    }
    .bl-main .bl-account-unified-page .bl-profile-actions-bar,
    .bl-main .bl-account-unified-page .bl-registration-actions {
        flex-direction: column !important;
    }
}


/* v1.0.80 - Polish Edit Profile password controls and BEERLEAGUE Stats card sizing. */
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .control-group:has(input[type="password"]),
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-password,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-password1,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-password2,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-password-confirm,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-confirm-password {
    align-items: start !important;
}
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .control-group:has(input[type="password"]) .controls,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-password .controls,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-password1 .controls,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-password2 .controls,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-password-confirm .controls,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-confirm-password .controls {
    max-width: 440px !important;
    width: 100% !important;
}
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .control-group:has(input[type="password"]) .input-group,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-password .input-group,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-password1 .input-group,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-password2 .input-group,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-password-confirm .input-group,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-confirm-password .input-group {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) auto !important;
    align-items: center !important;
    gap: .42rem !important;
    width: 100% !important;
    max-width: 440px !important;
}
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .control-group:has(input[type="password"]) input[type="password"],
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .control-group:has(input[type="password"]) input[type="text"],
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-password input,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-password1 input,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-password2 input,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-password-confirm input,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-confirm-password input {
    width: 100% !important;
    min-width: 220px !important;
    max-width: none !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: .42rem .58rem !important;
}
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .control-group:has(input[type="password"]) .input-password-toggle,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-password .input-password-toggle,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-password1 .input-password-toggle,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-password2 .input-password-toggle,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-password-confirm .input-password-toggle,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-confirm-password .input-password-toggle {
    min-width: 104px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: .42rem .62rem !important;
    border-radius: 8px !important;
    font-size: .62rem !important;
}
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .control-group:has(input[type="password"]) .form-text,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .control-group:has(input[type="password"]) .form-control-feedback,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-password .form-text,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-password1 .form-text,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-password2 .form-text {
    max-width: 440px !important;
    margin: .2rem 0 0 !important;
    font-size: .62rem !important;
    line-height: 1.25 !important;
}
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-card-beerleague-stats .bl-field-player-stats,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-card-beerleague-stats .bl-field-playerstats,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-card-beerleague-stats .bl-field-stats,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-card-beerleague-stats .control-group:has(.bl-profile-stats-link-card) {
    display: block !important;
    min-height: 0 !important;
    padding: .28rem .62rem .72rem !important;
}
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-card-beerleague-stats .control-group:has(.bl-profile-stats-link-card) .control-label,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-card-beerleague-stats .bl-field-player-stats .control-label,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-card-beerleague-stats .bl-field-playerstats .control-label,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-card-beerleague-stats .bl-field-stats .control-label {
    display: none !important;
}
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-card-beerleague-stats .control-group:has(.bl-profile-stats-link-card) .controls,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-card-beerleague-stats .bl-field-player-stats .controls,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-card-beerleague-stats .bl-field-playerstats .controls,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-card-beerleague-stats .bl-field-stats .controls {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
}
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-card-beerleague-stats .bl-profile-stats-link-card {
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 126px !important;
    padding: .82rem .9rem !important;
    gap: .55rem !important;
    border-radius: 13px !important;
    border-color: rgba(255,207,72,.34) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(255,176,0,.16), transparent 44%),
        linear-gradient(135deg, rgba(255,173,24,.10), rgba(0,220,154,.075)) !important;
}
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-card-beerleague-stats .bl-profile-stats-link-card strong {
    font-size: .82rem !important;
    line-height: 1.15 !important;
}
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-card-beerleague-stats .bl-profile-stats-link-card p {
    max-width: 520px !important;
    font-size: .72rem !important;
    line-height: 1.35 !important;
}
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-card-beerleague-stats .bl-profile-stats-actions {
    display: flex !important;
    gap: .45rem !important;
    flex-wrap: wrap !important;
}
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-card-beerleague-stats .bl-profile-stats-actions a {
    min-height: 30px !important;
    height: 30px !important;
    padding: .34rem .64rem !important;
    font-size: .64rem !important;
}
@media (max-width: 760px) {
    .bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .control-group:has(input[type="password"]) .input-group,
    .bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-password .input-group,
    .bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-password1 .input-group,
    .bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-field-password2 .input-group {
        grid-template-columns: 1fr !important;
    }
    .bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .control-group:has(input[type="password"]) input[type="password"],
    .bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .control-group:has(input[type="password"]) input[type="text"] {
        min-width: 0 !important;
    }
}


/* v1.0.81 - Let the BEERLEAGUE Player Stats card fill the Registration stats tile cleanly. */
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-player-stats,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-playerstats,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-stats,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .control-group:has(.bl-profile-stats-link-card) {
    display: block !important;
    min-height: 0 !important;
    padding: .28rem .62rem .78rem !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .control-group:has(.bl-profile-stats-link-card) .control-label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-player-stats .control-label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-playerstats .control-label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-stats .control-label {
    display: none !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .control-group:has(.bl-profile-stats-link-card) .controls,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-player-stats .controls,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-playerstats .controls,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-stats .controls {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-profile-stats-link-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
        "title actions"
        "copy actions" !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 120px !important;
    padding: .86rem .95rem !important;
    gap: .38rem .85rem !important;
    border-radius: 13px !important;
    border-color: rgba(255,207,72,.36) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(255,176,0,.18), transparent 46%),
        radial-gradient(circle at 100% 100%, rgba(0,220,154,.13), transparent 42%),
        linear-gradient(135deg, rgba(255,173,24,.105), rgba(0,220,154,.08)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.18) !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-profile-stats-link-card strong {
    grid-area: title !important;
    color: var(--bl-logo-orange-bright) !important;
    font-size: .86rem !important;
    line-height: 1.12 !important;
    letter-spacing: .06em !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-profile-stats-link-card p {
    grid-area: copy !important;
    max-width: 580px !important;
    margin: 0 !important;
    font-size: .74rem !important;
    line-height: 1.35 !important;
    color: rgba(243,247,245,.78) !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-profile-stats-actions {
    grid-area: actions !important;
    display: grid !important;
    align-content: center !important;
    justify-items: stretch !important;
    gap: .42rem !important;
    min-width: 150px !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-profile-stats-actions a {
    width: 100% !important;
    min-height: 31px !important;
    height: 31px !important;
    padding: .34rem .66rem !important;
    font-size: .64rem !important;
    white-space: nowrap !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-steamid {
    margin-top: .12rem !important;
}
@media (max-width: 760px) {
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-profile-stats-link-card {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "title"
            "copy"
            "actions" !important;
    }
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-profile-stats-actions {
        min-width: 0 !important;
    }
}


/* v1.0.82 - Align Registration/Edit Profile account cards and hide Steam-autofilled Registration Name. */
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-edit-primary-card,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card {
    min-height: 286px !important;
}
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-edit-primary-card .bl-field-row,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-row {
    grid-template-columns: minmax(170px, 230px) minmax(0, 1fr) !important;
}
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-edit-primary-card .controls,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .controls {
    max-width: 440px !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-name {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card::after {
    content: "Steam validation sets your display name automatically; username is used as a safe fallback." !important;
    display: block !important;
    margin: .56rem .62rem 0 !important;
    padding: .42rem .55rem !important;
    border: 1px solid rgba(255,207,72,.22) !important;
    border-radius: 10px !important;
    background: rgba(255,176,0,.075) !important;
    color: rgba(255,235,178,.82) !important;
    font-size: .64rem !important;
    line-height: 1.25 !important;
    letter-spacing: .035em !important;
    text-transform: uppercase !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-username,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password1,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password2,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-email,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-email1,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-email2 {
    width: 100% !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .input-group,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-edit-primary-card .input-group {
    max-width: 440px !important;
}
@media (max-width: 760px) {
    .bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-edit-primary-card .bl-field-row,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-row {
        grid-template-columns: 1fr !important;
    }
}


/* v1.0.83 - Make Registration BEERLEAGUE Stats tile match Edit Profile exactly. */
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats {
    width: 100% !important;
    max-width: none !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-player-stats,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-playerstats,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-stats,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .control-group:has(.bl-profile-stats-link-card) {
    display: block !important;
    min-height: 0 !important;
    padding: .28rem .62rem .72rem !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .control-group:has(.bl-profile-stats-link-card) .control-label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-player-stats .control-label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-playerstats .control-label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-stats .control-label {
    display: none !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .control-group:has(.bl-profile-stats-link-card) .controls,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-player-stats .controls,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-playerstats .controls,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-stats .controls {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-profile-stats-link-card {
    display: grid !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    align-items: start !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 126px !important;
    padding: .82rem .9rem !important;
    gap: .55rem !important;
    border-radius: 13px !important;
    border-color: rgba(255,207,72,.34) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(255,176,0,.16), transparent 44%),
        linear-gradient(135deg, rgba(255,173,24,.10), rgba(0,220,154,.075)) !important;
    box-shadow: none !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-profile-stats-link-card strong {
    grid-area: auto !important;
    color: var(--bl-logo-orange-bright) !important;
    font-size: .82rem !important;
    line-height: 1.15 !important;
    letter-spacing: .055em !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-profile-stats-link-card p {
    grid-area: auto !important;
    max-width: 520px !important;
    margin: 0 !important;
    font-size: .72rem !important;
    line-height: 1.35 !important;
    color: rgba(243,247,245,.74) !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-profile-stats-actions {
    grid-area: auto !important;
    display: flex !important;
    align-content: initial !important;
    justify-items: initial !important;
    justify-content: flex-start !important;
    gap: .45rem !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
    width: auto !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-profile-stats-actions a {
    width: auto !important;
    min-width: 0 !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: .34rem .64rem !important;
    font-size: .64rem !important;
    white-space: nowrap !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-steamid,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-steam-id {
    display: grid !important;
    grid-template-columns: minmax(145px, 220px) minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 38px !important;
    margin-top: 0 !important;
    padding: 0 !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-steamid .controls,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-steam-id .controls {
    max-width: 220px !important;
    padding: .28rem .62rem !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-steamid input,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-steam-id input {
    width: 100% !important;
    max-width: 220px !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: .32rem .5rem !important;
    font-size: .72rem !important;
}
@media (max-width: 760px) {
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-steamid,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-steam-id {
        grid-template-columns: 1fr !important;
    }
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-steamid .controls,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-steam-id .controls,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-steamid input,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-steam-id input {
        max-width: none !important;
    }
}


/* v1.0.84 - Unified BEERLEAGUE Login page to match account/profile forms. */
.bl-main .bl-account-login-page {
    max-width: 1040px !important;
    margin-inline: auto !important;
    padding: 1rem !important;
    border: 1px solid rgba(0,220,154,.36) !important;
    border-left: 4px solid rgba(53,240,173,.92) !important;
    border-radius: 10px !important;
    background:
        linear-gradient(rgba(0,220,154,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,220,154,.045) 1px, transparent 1px),
        radial-gradient(circle at 100% 0%, rgba(255,176,0,.13), transparent 34%),
        linear-gradient(180deg, rgba(0, 44, 29, .88), rgba(0, 12, 9, .94)) !important;
    background-size: 32px 32px, 32px 32px, auto, auto !important;
    color: rgba(238,248,242,.90) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.055) !important;
}
.bl-main .bl-account-login-page .page-header,
.bl-main .bl-account-login-page .bl-profile-generated-heading {
    margin: 0 0 .9rem !important;
    padding: 0 !important;
    border: 0 !important;
}
.bl-main .bl-account-login-page .page-header h1,
.bl-main .bl-account-login-page .bl-profile-generated-heading h1 {
    margin: 0 !important;
    padding: .78rem 1rem !important;
    border: 1px solid rgba(255,190,48,.24) !important;
    border-radius: 16px !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(255,176,0,.16), transparent 32%),
        radial-gradient(circle at 100% 0%, rgba(0,220,154,.13), transparent 34%),
        linear-gradient(135deg, rgba(5,21,15,.98), rgba(2,10,8,.98)) !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06) !important;
    color: #fff !important;
    font-family: var(--bl-font-display) !important;
    font-size: clamp(1.18rem, 2vw, 1.72rem) !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 22px rgba(0,220,154,.12) !important;
}
.bl-main .bl-account-login-page .page-header h1::before,
.bl-main .bl-account-login-page .bl-profile-generated-heading h1::before {
    content: "PLAYER ACCOUNT" !important;
    display: block !important;
    width: fit-content !important;
    margin: 0 0 .35rem !important;
    padding: .22rem .52rem !important;
    border: 1px solid rgba(0,220,154,.28) !important;
    border-radius: 999px !important;
    background: rgba(0,220,154,.09) !important;
    color: #35f0ad !important;
    font-size: .58rem !important;
    letter-spacing: .15em !important;
    line-height: 1 !important;
    text-shadow: none !important;
}
.bl-main .bl-account-login-page .bl-login-intro-card {
    margin: 0 0 .85rem !important;
    padding: .72rem .85rem !important;
    border: 1px solid rgba(0,220,154,.18) !important;
    border-radius: 14px !important;
    background: linear-gradient(90deg, rgba(0,220,154,.075), rgba(255,176,0,.045), transparent) !important;
}
.bl-main .bl-account-login-page #member-login,
.bl-main .bl-account-login-page .bl-profile-display-toprow {
    width: 100% !important;
    max-width: none !important;
}
.bl-main .bl-account-login-page .bl-login-toprow {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 230px) !important;
    align-items: stretch !important;
    gap: .85rem !important;
    width: 100% !important;
    margin: 0 0 .85rem !important;
}
.bl-main .bl-account-login-page .bl-login-core,
.bl-main .bl-account-login-page .bl-login-card {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
}
.bl-main .bl-account-login-page .bl-login-card {
    position: relative !important;
    box-sizing: border-box !important;
    min-height: 286px !important;
    padding: .9rem 1rem !important;
    border: 1px solid rgba(0,220,154,.22) !important;
    border-top: 2px solid rgba(0,220,154,.42) !important;
    border-radius: 16px !important;
    background:
        linear-gradient(90deg, rgba(0,220,154,.065), transparent 26%, rgba(255,176,0,.035) 100%),
        linear-gradient(180deg, rgba(5,21,15,.96), rgba(2,10,8,.97)) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05) !important;
    color: rgba(238,248,242,.86) !important;
    overflow: hidden !important;
}
.bl-main .bl-account-login-page .bl-login-card::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    background: linear-gradient(180deg, #35f0ad, rgba(255,207,72,.72)) !important;
    opacity: .75 !important;
}
.bl-main .bl-account-login-page .bl-login-card legend {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    margin: -.18rem 0 .72rem !important;
    padding: .28rem .62rem !important;
    border: 1px solid rgba(255,207,72,.32) !important;
    border-radius: 999px !important;
    background: rgba(255,176,0,.10) !important;
    color: #ffcf48 !important;
    font-size: .68rem !important;
    font-weight: 950 !important;
    letter-spacing: .13em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}
.bl-main .bl-account-login-page .bl-login-field {
    display: grid !important;
    grid-template-columns: minmax(170px, 230px) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0 !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.065) !important;
}
.bl-main .bl-account-login-page .bl-login-field .control-label,
.bl-main .bl-account-login-page .bl-login-field .control-label label,
.bl-main .bl-account-login-page .bl-login-field label {
    margin: 0 !important;
    padding: .52rem .62rem !important;
    color: rgba(53,240,173,.80) !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    letter-spacing: .075em !important;
    line-height: 1.35 !important;
    text-transform: uppercase !important;
}
.bl-main .bl-account-login-page .bl-login-field .controls {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 440px !important;
    padding: .28rem .62rem !important;
}
.bl-main .bl-account-login-page .bl-login-field input[type="text"],
.bl-main .bl-account-login-page .bl-login-field input[type="password"],
.bl-main .bl-account-login-page .bl-login-field input[type="email"] {
    width: 100% !important;
    max-width: 440px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: .42rem .58rem !important;
    border: 1px solid rgba(0,220,154,.22) !important;
    border-radius: 8px !important;
    background: rgba(0,0,0,.18) !important;
    color: rgba(245,255,251,.94) !important;
    font-size: .84rem !important;
    font-weight: 750 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.bl-main .bl-account-login-page .bl-login-field .input-group {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) auto !important;
    gap: .42rem !important;
    align-items: center !important;
    max-width: 440px !important;
}
.bl-main .bl-account-login-page .bl-login-field .input-password-toggle {
    min-width: 104px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: .42rem .62rem !important;
    border-radius: 8px !important;
    font-size: .62rem !important;
}
.bl-main .bl-account-login-page .bl-login-remember-row .controls {
    display: flex !important;
    align-items: center !important;
    gap: .45rem !important;
}
.bl-main .bl-account-login-page .bl-login-side-panel {
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .55rem !important;
    width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: .82rem .72rem !important;
    text-align: center !important;
    border: 1px solid rgba(0,220,154,.34) !important;
    border-left: 4px solid rgba(255,207,72,.92) !important;
    border-radius: 14px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,176,0,.16), transparent 42%),
        linear-gradient(180deg, rgba(0, 38, 25, .84), rgba(0, 13, 10, .78)) !important;
}
.bl-main .bl-account-login-page .bl-login-icon {
    display: grid !important;
    place-items: center !important;
    width: 112px !important;
    height: 112px !important;
    border: 1px solid rgba(255, 173, 24, .55) !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, rgba(255,173,24,.18), rgba(0,220,154,.12)), rgba(0,0,0,.30) !important;
    color: var(--bl-logo-orange-bright) !important;
    font-size: 2rem !important;
    font-weight: 950 !important;
    box-shadow: 0 0 0 2px rgba(53,240,173,.18), 0 14px 28px rgba(0,0,0,.24) !important;
}
.bl-main .bl-account-login-page .bl-login-mini-notes {
    display: grid !important;
    gap: .45rem !important;
    width: 100% !important;
}
.bl-main .bl-account-login-page .bl-login-mini-notes > div {
    padding: .48rem .52rem !important;
    border: 1px solid rgba(0,220,154,.20) !important;
    border-radius: 10px !important;
    background: rgba(0,0,0,.18) !important;
}
.bl-main .bl-account-login-page .bl-login-mini-notes strong,
.bl-main .bl-account-login-page .bl-login-copy strong {
    color: var(--bl-logo-orange-bright) !important;
    font-size: .72rem !important;
    text-transform: uppercase !important;
    letter-spacing: .055em !important;
}
.bl-main .bl-account-login-page .bl-login-mini-notes span,
.bl-main .bl-account-login-page .bl-login-copy span {
    color: rgba(243,247,245,.74) !important;
    font-size: .68rem !important;
    line-height: 1.3 !important;
}
.bl-main .bl-account-login-page .bl-login-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: .55rem !important;
    flex-wrap: wrap !important;
    margin-top: .95rem !important;
    padding: .72rem .85rem !important;
    border: 1px solid rgba(0,220,154,.18) !important;
    border-radius: 14px !important;
    background: linear-gradient(90deg, rgba(0,220,154,.075), rgba(255,176,0,.045), transparent) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
}
.bl-main .bl-account-login-page .bl-login-actions .btn {
    min-height: 30px !important;
    height: 30px !important;
    padding: .34rem .64rem !important;
    font-size: .64rem !important;
}
@media (max-width: 820px) {
    .bl-main .bl-account-login-page .bl-login-toprow {
        grid-template-columns: 1fr !important;
    }
}
@media (max-width: 760px) {
    .bl-main .bl-account-login-page {
        padding: .75rem !important;
    }
    .bl-main .bl-account-login-page .bl-login-field {
        grid-template-columns: 1fr !important;
    }
    .bl-main .bl-account-login-page .bl-login-field .input-group {
        grid-template-columns: 1fr !important;
    }
    .bl-main .bl-account-login-page .bl-login-actions {
        flex-direction: column !important;
    }
    .bl-main .bl-account-login-page .bl-login-actions .btn {
        width: 100% !important;
    }
}


/* v1.0.85 - Match User Registration input widths to Edit Profile exactly. */
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-username .controls,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-email .controls,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-email1 .controls,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-email2 .controls {
    width: 100% !important;
    max-width: 180px !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-username input,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-email input,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-email1 input,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-email2 input {
    width: 100% !important;
    max-width: 180px !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: .32rem .5rem !important;
    font-size: .72rem !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password .controls,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password1 .controls,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password2 .controls,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password-confirm .controls,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-confirm-password .controls {
    width: 100% !important;
    max-width: 370px !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password .input-group,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password1 .input-group,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password2 .input-group,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password-confirm .input-group,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-confirm-password .input-group {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) auto !important;
    align-items: center !important;
    gap: .42rem !important;
    width: 100% !important;
    max-width: 370px !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password input,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password1 input,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password2 input,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password-confirm input,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-confirm-password input {
    width: 100% !important;
    min-width: 220px !important;
    max-width: none !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: .42rem .58rem !important;
    font-size: .84rem !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password .input-password-toggle,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password1 .input-password-toggle,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password2 .input-password-toggle,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password-confirm .input-password-toggle,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-confirm-password .input-password-toggle {
    min-width: 104px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: .42rem .62rem !important;
    border-radius: 8px !important;
    font-size: .62rem !important;
}
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password .form-text,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password1 .form-text,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password2 .form-text,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password .form-control-feedback,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password1 .form-control-feedback,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password2 .form-control-feedback {
    max-width: 370px !important;
    margin: .2rem 0 0 !important;
    font-size: .62rem !important;
    line-height: 1.25 !important;
}
@media (max-width: 760px) {
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-username .controls,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-email .controls,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-email1 .controls,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-email2 .controls,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-username input,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-email input,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-email1 input,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-email2 input,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password .controls,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password1 .controls,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password2 .controls {
        max-width: none !important;
    }
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password .input-group,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password1 .input-group,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password2 .input-group {
        grid-template-columns: 1fr !important;
        max-width: none !important;
    }
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password input,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password1 input,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-primary-card .bl-field-password2 input {
        min-width: 0 !important;
    }
}


/* v1.0.86 - Edit Profile Name is Steam-managed: visible, submitted, but not editable. */
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-edit-primary-card .bl-field-steam-managed-name .controls,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-edit-primary-card .bl-field-name .controls {
    width: 100% !important;
    max-width: 180px !important;
}
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-edit-primary-card .bl-field-steam-managed-name input,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-edit-primary-card .bl-field-name input[readonly],
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-edit-primary-card input[data-bl-steam-managed-name="1"] {
    width: 100% !important;
    max-width: 180px !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: .32rem .5rem !important;
    border-color: rgba(255,207,72,.34) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(224,239,232,.92)) !important;
    color: rgba(8,18,14,.92) !important;
    cursor: not-allowed !important;
    user-select: text !important;
    opacity: .92 !important;
    box-shadow: inset 0 1px rgba(255,255,255,.78), 0 0 0 1px rgba(255,207,72,.06) !important;
}
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-edit-primary-card .bl-field-steam-managed-name .controls::after,
.bl-main .bl-account-edit-page #member-profile.bl-user-profile-form .bl-profile-edit-primary-card .bl-field-name:has(input[data-bl-steam-managed-name="1"]) .controls::after {
    content: "Managed by Steam ID" !important;
    display: block !important;
    width: fit-content !important;
    margin-top: .2rem !important;
    padding: .12rem .36rem !important;
    border: 1px solid rgba(255,207,72,.24) !important;
    border-radius: 999px !important;
    background: rgba(255,176,0,.075) !important;
    color: rgba(255,235,178,.84) !important;
    font-size: .54rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
}


/* v1.0.87 - Grey out BEERLEAGUE Player Stats actions until Steam ID/profile is entered. */
.bl-main .bl-account-unified-page .bl-profile-card-beerleague-stats .bl-profile-stats-link-card:has(.bl-profile-stats-disabled) {
    border-color: rgba(160,170,166,.28) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(160,170,166,.10), transparent 44%),
        linear-gradient(135deg, rgba(110,120,116,.10), rgba(0,0,0,.12)) !important;
}
.bl-main .bl-account-unified-page .bl-profile-card-beerleague-stats .bl-profile-stats-disabled,
.bl-main .bl-account-unified-page .bl-profile-card-beerleague-stats a.bl-profile-stats-disabled,
.bl-main .bl-account-unified-page .bl-profile-card-beerleague-stats .bl-profile-stats-actions a.bl-profile-stats-disabled {
    border-color: rgba(150,160,156,.28) !important;
    background: linear-gradient(180deg, rgba(130,140,136,.24), rgba(82,92,88,.22)) !important;
    color: rgba(210,218,214,.52) !important;
    cursor: not-allowed !important;
    pointer-events: auto !important;
    opacity: .64 !important;
    filter: grayscale(1) saturate(.25) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.045) !important;
    text-shadow: none !important;
}
.bl-main .bl-account-unified-page .bl-profile-card-beerleague-stats .bl-profile-stats-link-card:has(.bl-profile-stats-disabled)::after {
    content: "Enter Steam ID to unlock stats links" !important;
    display: block !important;
    width: fit-content !important;
    margin-top: -.18rem !important;
    padding: .14rem .42rem !important;
    border: 1px solid rgba(160,170,166,.22) !important;
    border-radius: 999px !important;
    background: rgba(120,130,126,.10) !important;
    color: rgba(216,224,220,.58) !important;
    font-size: .54rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
}
.bl-main .bl-account-unified-page .bl-profile-card-beerleague-stats input:focus {
    border-color: rgba(53,240,173,.58) !important;
    box-shadow: 0 0 0 2px rgba(53,240,173,.12), inset 0 1px rgba(255,255,255,.08) !important;
}


/* v1.0.89 - Robust Steam ID gate for Edit Profile and Registration stats buttons. */
.bl-main .bl-account-unified-page .bl-profile-card-beerleague-stats.bl-stats-steam-locked .bl-profile-stats-link-card,
.bl-main .bl-account-unified-page .bl-registration-card-beerleague-stats.bl-stats-steam-locked .bl-profile-stats-link-card,
.bl-main .bl-account-unified-page .bl-stats-steam-locked .bl-profile-stats-link-card {
    border-color: rgba(150,160,156,.24) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(150,160,156,.10), transparent 44%),
        linear-gradient(135deg, rgba(80,92,88,.16), rgba(0,0,0,.18)) !important;
}
.bl-main .bl-account-unified-page .bl-profile-stats-disabled,
.bl-main .bl-account-unified-page a.bl-profile-stats-disabled,
.bl-main .bl-account-unified-page .bl-profile-stats-actions a.bl-profile-stats-disabled,
.bl-main .bl-account-unified-page .bl-profile-stats-link-card a.bl-profile-stats-disabled {
    border-color: rgba(150,160,156,.30) !important;
    background: linear-gradient(180deg, rgba(126,136,132,.30), rgba(68,78,74,.28)) !important;
    color: rgba(214,222,218,.50) !important;
    cursor: not-allowed !important;
    pointer-events: auto !important;
    opacity: .58 !important;
    filter: grayscale(1) saturate(.18) brightness(.82) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.04) !important;
    text-shadow: none !important;
}
.bl-main .bl-account-unified-page .bl-stats-steam-locked .bl-profile-stats-link-card::after {
    content: "Enter Steam ID to unlock stats links" !important;
    display: block !important;
    width: fit-content !important;
    margin-top: -.18rem !important;
    padding: .14rem .42rem !important;
    border: 1px solid rgba(160,170,166,.22) !important;
    border-radius: 999px !important;
    background: rgba(120,130,126,.10) !important;
    color: rgba(216,224,220,.58) !important;
    font-size: .54rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
}


/* v1.0.90 - Sticky top menu/login utility bar while scrolling. */
:root {
    --bl-sticky-utility-top: 0px;
    --bl-sticky-utility-z: 1200;
}
body.beerleague-site .bl-top-login-area.bl-top-utility-area {
    position: sticky !important;
    top: var(--bl-sticky-utility-top) !important;
    z-index: var(--bl-sticky-utility-z) !important;
    margin: 0 !important;
    padding: .34rem 0 .34rem !important;
    border-bottom: 1px solid rgba(53, 240, 173, .18) !important;
    background:
        linear-gradient(90deg, rgba(0,0,0,.72), rgba(4,36,25,.72), rgba(0,0,0,.70)) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.28), inset 0 -1px rgba(255,255,255,.035) !important;
    backdrop-filter: blur(10px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
    overflow: visible !important;
    transform: translateZ(0) !important;
}
body.beerleague-site .bl-top-login-area.bl-top-utility-area::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
        radial-gradient(circle at 10% 0%, rgba(53,240,173,.14), transparent 38%),
        linear-gradient(90deg, rgba(255,207,72,.10), transparent 28%, rgba(53,240,173,.08)) !important;
    opacity: .75 !important;
}
body.beerleague-site .bl-top-login-area.bl-top-utility-area::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 2px !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, rgba(255,207,72,.70), rgba(53,240,173,.62), transparent 74%) !important;
}
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-login-inner,
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-utility-inner {
    position: relative !important;
    z-index: 1 !important;
    min-height: 38px !important;
    gap: .75rem !important;
    overflow: visible !important;
}
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-menu-cluster,
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-menu,
body.beerleague-site .bl-top-login-area.bl-top-utility-area .moduletable,
body.beerleague-site .bl-top-login-area.bl-top-utility-area .mod-menu,
body.beerleague-site .bl-top-login-area.bl-top-utility-area ul,
body.beerleague-site .bl-top-login-area.bl-top-utility-area li {
    overflow: visible !important;
}
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-mini-logo {
    filter: drop-shadow(0 0 10px rgba(53,240,173,.22)) !important;
}
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-menu a,
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-menu .nav-link {
    min-height: 32px !important;
    box-shadow: inset 0 1px rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.18) !important;
}
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-login-module-utility {
    position: relative !important;
    z-index: 2 !important;
}
body.beerleague-site .bl-top-login-area.bl-top-utility-area .mod-login,
body.beerleague-site .bl-top-login-area.bl-top-utility-area .login,
body.beerleague-site .bl-top-login-area.bl-top-utility-area form[id*="login"],
body.beerleague-site .bl-top-login-area.bl-top-utility-area form {
    box-shadow: inset 0 1px rgba(255,255,255,.07), 0 9px 22px rgba(0,0,0,.24) !important;
}
body.beerleague-site .bl-top-login-area.bl-top-utility-area .dropdown-menu,
body.beerleague-site .bl-top-login-area.bl-top-utility-area .mod-menu__sub,
body.beerleague-site .bl-top-login-area.bl-top-utility-area .navbar-nav .dropdown-menu,
body.beerleague-site .bl-top-login-area.bl-top-utility-area ul ul {
    z-index: calc(var(--bl-sticky-utility-z) + 20) !important;
}
body.beerleague-site .bl-site-header {
    position: relative !important;
    z-index: 20 !important;
}
@media (max-width: 760px) {
    body.beerleague-site .bl-top-login-area.bl-top-utility-area {
        position: sticky !important;
        top: 0 !important;
        padding: .28rem 0 !important;
    }
    body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-login-inner,
    body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-utility-inner {
        align-items: stretch !important;
        gap: .45rem !important;
    }
    body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-menu a,
    body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-menu .nav-link {
        min-height: 30px !important;
    }
}
@supports not ((position: sticky) or (position: -webkit-sticky)) {
    body.beerleague-site .bl-top-login-area.bl-top-utility-area {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
    }
    body.beerleague-site {
        padding-top: 52px !important;
    }
}


/* v1.0.91 - Sticky utility alignment correction.
   Keep the sticky background viewport-wide, but constrain the actual menu/login row
   to the same centered container width as the rest of the BEERLEAGUE page. */
body.beerleague-site .bl-top-login-area.bl-top-utility-area {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
}
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-login-inner,
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-utility-inner {
    width: min(1408px, calc(100% - 20px)) !important;
    max-width: min(1408px, calc(100% - 20px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-menu-cluster {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-left: clamp(.35rem, 1vw, .9rem) !important;
}
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-login-module-utility {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    padding-right: clamp(.35rem, 1vw, .9rem) !important;
    max-width: 49% !important;
}
@media (max-width: 1160px) {
    body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-login-inner,
    body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-utility-inner {
        flex-wrap: wrap !important;
        justify-content: center !important;
        width: min(100% - 18px, 100%) !important;
        max-width: min(100% - 18px, 100%) !important;
    }
    body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-menu-cluster {
        width: 100% !important;
        flex: 1 1 100% !important;
        justify-content: center !important;
        padding-left: 0 !important;
    }
    body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-login-module-utility {
        max-width: 100% !important;
        justify-content: center !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
    }
}
@media (max-width: 760px) {
    body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-login-inner,
    body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-utility-inner {
        width: min(100% - 14px, 100%) !important;
        max-width: min(100% - 14px, 100%) !important;
    }
}


/* v1.0.92 - Cut sticky header sides back in.
   The sticky layer stays full-width only for positioning; the visible dark bar
   is back on the centered utility row so the BEERLEAGUE logo/map background
   remains visible on both sides all the way to the top. */
body.beerleague-site .bl-top-login-area.bl-top-utility-area {
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding-top: .34rem !important;
    padding-bottom: .18rem !important;
}
body.beerleague-site .bl-top-login-area.bl-top-utility-area::before,
body.beerleague-site .bl-top-login-area.bl-top-utility-area::after {
    display: none !important;
    content: none !important;
}
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-login-inner,
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-utility-inner {
    position: relative !important;
    isolation: isolate !important;
    min-height: 42px !important;
    padding-top: .20rem !important;
    padding-bottom: .20rem !important;
    border-bottom: 1px solid rgba(53, 240, 173, .18) !important;
    background:
        radial-gradient(circle at 6% 0%, rgba(53,240,173,.14), transparent 38%),
        linear-gradient(90deg, rgba(0,0,0,.72), rgba(4,36,25,.74), rgba(0,0,0,.70)) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.28), inset 0 -1px rgba(255,255,255,.035) !important;
    backdrop-filter: blur(10px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
}
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-login-inner::after,
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-utility-inner::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 2px !important;
    pointer-events: none !important;
    z-index: -1 !important;
    background: linear-gradient(90deg, rgba(255,207,72,.70), rgba(53,240,173,.62), transparent 74%) !important;
}
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-menu-cluster {
    padding-left: clamp(.35rem, 1vw, .9rem) !important;
}
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-login-module-utility {
    padding-right: clamp(.35rem, 1vw, .9rem) !important;
}
@media (max-width: 1160px) {
    body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-login-inner,
    body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-utility-inner {
        padding-left: .35rem !important;
        padding-right: .35rem !important;
    }
}
@media (max-width: 760px) {
    body.beerleague-site .bl-top-login-area.bl-top-utility-area {
        padding-top: .24rem !important;
        padding-bottom: .12rem !important;
    }
    body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-login-inner,
    body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-utility-inner {
        min-height: 38px !important;
        padding: .18rem .30rem !important;
    }
}


/* v1.0.93 - Black sticky header bar.
   Keep the v1.0.92 cut-off sides, but remove the green cast from the sticky
   utility row so the bar reads as black while the BEERLEAGUE background remains
   visible around it. */
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-login-inner,
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-utility-inner {
    border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
    background:
        linear-gradient(180deg, rgba(0,0,0,.94), rgba(0,0,0,.88)) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.36), inset 0 -1px rgba(255,255,255,.045) !important;
    backdrop-filter: blur(8px) saturate(1.02) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.02) !important;
}
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-login-inner::after,
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-utility-inner::after {
    background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.07), transparent 74%) !important;
    opacity: .65 !important;
}
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-mini-logo {
    filter: none !important;
}
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-menu,
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-menu-utility {
    background: linear-gradient(180deg, rgba(0,0,0,.86), rgba(0,0,0,.78)) !important;
    border-color: rgba(255,255,255,.10) !important;
}
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-menu a,
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-menu .nav-link,
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-menu-utility a,
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-menu-utility .nav-link {
    box-shadow: inset 0 1px rgba(255,255,255,.055), 0 8px 18px rgba(0,0,0,.22) !important;
}
body.beerleague-site .bl-top-login-area.bl-top-utility-area .mod-login,
body.beerleague-site .bl-top-login-area.bl-top-utility-area .login,
body.beerleague-site .bl-top-login-area.bl-top-utility-area form[id*="login"],
body.beerleague-site .bl-top-login-area.bl-top-utility-area form,
body.beerleague-site .bl-top-login-module-utility .mod-login,
body.beerleague-site .bl-top-login-module-utility .login,
body.beerleague-site .bl-top-login-module-utility form[id*="login"],
body.beerleague-site .bl-top-login-module-utility form,
body.beerleague-site .bl-top-login-module-utility .bl-login-logout {
    background: linear-gradient(180deg, rgba(0,0,0,.88), rgba(0,0,0,.80)) !important;
    border-color: rgba(255,255,255,.12) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.06), 0 9px 22px rgba(0,0,0,.28) !important;
}


/* v1.0.94 - Flush black sticky header to the top edge.
   Removes the remaining top padding above the centered black sticky row so the
   black header starts at the very top of the viewport while preserving the
   cut-off sides/background visibility from v1.0.92. */
body.beerleague-site .bl-top-login-area.bl-top-utility-area {
    padding-top: 0 !important;
    padding-bottom: .18rem !important;
}
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-login-inner,
body.beerleague-site .bl-top-login-area.bl-top-utility-area .bl-top-utility-inner {
    margin-top: 0 !important;
    border-top: 0 !important;
}
@media (max-width: 760px) {
    body.beerleague-site .bl-top-login-area.bl-top-utility-area {
        padding-top: 0 !important;
        padding-bottom: .12rem !important;
    }
}

/* v1.0.96 - allow BEERLEAGUE Stats Navigation to show all buttons without horizontal scroll. */
.bl-beerleague-nav-area {
    width: min(1220px, calc(100vw - 18px)) !important;
    max-width: calc(100vw - 18px) !important;
    overflow: visible !important;
}
.bl-beerleague-nav-area .bl-module-stats-nav {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: .28rem !important;
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;
}
.bl-beerleague-nav-area .bl-module-stats-nav .bl-btn {
    width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    padding-inline: .34rem !important;
    font-size: clamp(.52rem, .66vw, .72rem) !important;
    letter-spacing: .025em !important;
}
@media (max-width: 760px) {
    .bl-beerleague-nav-area { width: calc(100vw - 10px) !important; max-width: calc(100vw - 10px) !important; }
    .bl-beerleague-nav-area .bl-module-stats-nav { gap: .18rem !important; }
    .bl-beerleague-nav-area .bl-module-stats-nav .bl-btn { padding-inline: .18rem !important; font-size: clamp(.46rem, 1.45vw, .62rem) !important; letter-spacing: 0 !important; }
}

/* v1.0.97 - stats nav now has seven buttons: My Stats, Matches, Competitive, Premier, Wingman, Map Ranks, Teams. */
.bl-beerleague-nav-area .bl-module-stats-nav {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}

/* v1.0.98 - stats nav now has six top-level buttons; Map Ranks lives under My Stats. */
.bl-beerleague-nav-area .bl-module-stats-nav {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

/* v1.0.99 - Registration Terms/AUP field polish.
   Joomla's User - Terms and Conditions plugin injects a complex consent field
   into com_users registration. The BEERLEAGUE two-column form grid made that
   article preview and agree/disagree controls cramped. Treat consent rows as
   full-width policy cards. */
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-terms,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-tos,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-termsofservice,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-terms-of-service,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-privacyconsent,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-privacy-consent,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has(#jform_terms),
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([name="jform[terms]"]),
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([name="jform[privacyconsent]"]),
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([id*="jform_terms"]),
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([id*="privacyconsent"]) {
    display: block !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    min-height: 0 !important;
    margin: .75rem 0 .2rem !important;
    padding: .82rem .9rem !important;
    border: 1px solid rgba(255, 207, 72, .26) !important;
    border-left: 4px solid rgba(255, 176, 0, .78) !important;
    border-radius: 14px !important;
    background:
        linear-gradient(135deg, rgba(255, 176, 0, .095), rgba(0, 220, 154, .045)),
        rgba(2, 12, 9, .74) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 12px 28px rgba(0,0,0,.20) !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-terms .control-label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-tos .control-label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-termsofservice .control-label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-terms-of-service .control-label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-privacyconsent .control-label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-privacy-consent .control-label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has(#jform_terms) .control-label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([name="jform[terms]"]) .control-label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([name="jform[privacyconsent]"]) .control-label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([id*="jform_terms"]) .control-label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([id*="privacyconsent"]) .control-label {
    display: block !important;
    width: 100% !important;
    margin: 0 0 .58rem !important;
    padding: 0 !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-terms > .control-label label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-tos > .control-label label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-termsofservice > .control-label label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-terms-of-service > .control-label label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-privacyconsent > .control-label label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-privacy-consent > .control-label label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has(#jform_terms) > .control-label label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([name="jform[terms]"]) > .control-label label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([name="jform[privacyconsent]"]) > .control-label label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([id*="jform_terms"]) > .control-label label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([id*="privacyconsent"]) > .control-label label {
    display: block !important;
    padding: 0 !important;
    color: #ffcf48 !important;
    font-size: .84rem !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-terms .controls,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-tos .controls,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-termsofservice .controls,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-terms-of-service .controls,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-privacyconsent .controls,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-privacy-consent .controls,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has(#jform_terms) .controls,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([name="jform[terms]"]) .controls,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([name="jform[privacyconsent]"]) .controls,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([id*="jform_terms"]) .controls,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([id*="privacyconsent"]) .controls {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .55rem !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has(#jform_terms) iframe,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([name="jform[terms]"]) iframe,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([id*="jform_terms"]) iframe,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([id*="privacyconsent"]) iframe,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has(#jform_terms) .modal-body,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([name="jform[terms]"]) .modal-body,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([id*="jform_terms"]) .modal-body,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([id*="privacyconsent"]) .modal-body,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has(#jform_terms) .card,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([name="jform[terms]"]) .card,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([id*="jform_terms"]) .card,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([id*="privacyconsent"]) .card,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has(#jform_terms) .well,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([name="jform[terms]"]) .well,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([id*="jform_terms"]) .well,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([id*="privacyconsent"]) .well {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 180px !important;
    max-height: 420px !important;
    overflow: auto !important;
    border: 1px solid rgba(0, 220, 154, .20) !important;
    border-radius: 10px !important;
    background: rgba(0,0,0,.26) !important;
    color: rgba(245,255,251,.92) !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has(#jform_terms) .form-check,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([name="jform[terms]"]) .form-check,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([name="jform[privacyconsent]"]) .form-check,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([id*="jform_terms"]) .form-check,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([id*="privacyconsent"]) .form-check,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has(#jform_terms) .radio,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([name="jform[terms]"]) .radio,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([name="jform[privacyconsent]"]) .radio,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([id*="jform_terms"]) .radio,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([id*="privacyconsent"]) .radio,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has(#jform_terms) .checkbox,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([name="jform[terms]"]) .checkbox,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([name="jform[privacyconsent]"]) .checkbox,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([id*="jform_terms"]) .checkbox,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([id*="privacyconsent"]) .checkbox {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: .42rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: .08rem 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has(#jform_terms) .controls label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([name="jform[terms]"]) .controls label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([name="jform[privacyconsent]"]) .controls label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([id*="jform_terms"]) .controls label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([id*="privacyconsent"]) .controls label {
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: .42rem !important;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(245,255,251,.92) !important;
    font-size: .76rem !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
    line-height: 1.35 !important;
    text-align: left !important;
    text-transform: none !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has(#jform_terms) input[type="checkbox"],
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([name="jform[terms]"]) input[type="checkbox"],
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([name="jform[privacyconsent]"]) input[type="checkbox"],
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([id*="jform_terms"]) input[type="checkbox"],
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([id*="privacyconsent"]) input[type="checkbox"],
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has(#jform_terms) input[type="radio"],
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([name="jform[terms]"]) input[type="radio"],
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([name="jform[privacyconsent]"]) input[type="radio"],
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([id*="jform_terms"]) input[type="radio"],
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .control-group:has([id*="privacyconsent"]) input[type="radio"] {
    flex: 0 0 16px !important;
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    margin: .08rem .1rem 0 0 !important;
}

/* v1.0.100 - Physically render Terms/AUP below the BEERLEAGUE Stats registration card and span full width. */
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: .9rem 0 0 !important;
    padding: .95rem 1rem !important;
    border: 1px solid rgba(255, 207, 72, .28) !important;
    border-left: 4px solid rgba(255, 176, 0, .84) !important;
    border-radius: 14px !important;
    background:
        linear-gradient(135deg, rgba(255, 176, 0, .10), rgba(0, 220, 154, .045)),
        rgba(2, 12, 9, .78) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 30px rgba(0,0,0,.22) !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-heading {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .2rem !important;
    margin: 0 0 .75rem !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-heading strong {
    color: #ffcf48 !important;
    font-size: .9rem !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-heading span {
    color: rgba(245,255,251,.68) !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .bl-registration-terms-field {
    display: block !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .control-label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .controls {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .control-label {
    margin: 0 0 .55rem !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .control-label label {
    color: rgba(245,255,251,.92) !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section iframe,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .card,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .well,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .modal-body {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 220px !important;
    max-height: 520px !important;
    overflow: auto !important;
    border: 1px solid rgba(0, 220, 154, .22) !important;
    border-radius: 10px !important;
    background: rgba(0,0,0,.28) !important;
    color: rgba(245,255,251,.92) !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .form-check,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .radio,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .checkbox,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section label {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: .45rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: .12rem 0 !important;
    color: rgba(245,255,251,.92) !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    text-transform: none !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section input[type="checkbox"],
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section input[type="radio"] {
    flex: 0 0 17px !important;
    width: 17px !important;
    min-width: 17px !important;
    max-width: 17px !important;
    height: 17px !important;
    min-height: 17px !important;
    max-height: 17px !important;
    margin: .08rem .12rem 0 0 !important;
}

/* v1.0.101 - Match Terms/AUP to normal registration cards and expand the embedded policy article. */
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: .72rem 0 0 !important;
    padding: .62rem .72rem .68rem !important;
    border: 1px solid rgba(0, 208, 132, .24) !important;
    border-left: 1px solid rgba(0, 208, 132, .24) !important;
    border-radius: 13px !important;
    background: linear-gradient(180deg, rgba(0, 38, 25, .78), rgba(0, 18, 13, .70)) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.035), 0 10px 22px rgba(0,0,0,.14) !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section legend {
    width: auto !important;
    margin: -.18rem 0 .52rem !important;
    padding: .18rem .52rem !important;
    border: 1px solid rgba(0, 208, 132, .36) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(0, 150, 99, .32), rgba(0, 95, 66, .28)) !important;
    color: var(--bl-green-bright) !important;
    font-size: .62rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: .065em !important;
    text-transform: uppercase !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-note {
    margin: 0 0 .6rem !important;
    color: rgba(243,247,245,.64) !important;
    font-size: .64rem !important;
    line-height: 1.35 !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .bl-registration-terms-heading {
    display: none !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .bl-registration-terms-field {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .controls,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .controls > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section iframe,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section textarea,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .card,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .well,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .modal-body,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section [class*="terms"],
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section [class*="tos"],
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section [class*="policy"] {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section iframe,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section textarea {
    min-height: 440px !important;
    height: clamp(440px, 58vh, 760px) !important;
    max-height: none !important;
    overflow: auto !important;
    border: 1px solid rgba(0, 208, 132, .24) !important;
    border-radius: 10px !important;
    background: rgba(248, 251, 249, .96) !important;
    color: #101714 !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .card,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .well,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .modal-body {
    min-height: 360px !important;
    max-height: none !important;
    overflow: visible !important;
    border: 1px solid rgba(0, 208, 132, .24) !important;
    border-radius: 10px !important;
    background: rgba(248, 251, 249, .96) !important;
    color: #101714 !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .form-check,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .radio,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .checkbox {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: .42rem !important;
    width: 100% !important;
    margin: .5rem 0 0 !important;
    padding: .45rem .5rem !important;
    border: 1px solid rgba(0, 208, 132, .16) !important;
    border-radius: 9px !important;
    background: rgba(0, 25, 17, .42) !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section label {
    color: rgba(243,247,245,.90) !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    text-transform: none !important;
}

/* v1.0.102 - Force the actual embedded Terms/AUP text box wide and tall.
   Some Joomla terms/article markup keeps inline width/height attributes or
   nested wrappers after the field is moved. Override the inner policy box,
   not just the outer card. */
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section {
    width: 100% !important;
    max-width: none !important;
    grid-column: 1 / -1 !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .bl-registration-terms-field,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .control-group,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .controls,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .controls > div,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .controls > fieldset,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .controls > .form-checks,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .controls > .terms,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .controls > .terms-container,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .controls > .modal,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .controls > .iframe,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section [class*="terms"],
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section [class*="policy"],
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section [class*="article"] {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section iframe,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section object,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section embed,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section textarea,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .modal-body,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .iframe,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .iframe iframe,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .card,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .well,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .article,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .article-body,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section [class*="article"] iframe,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section [class*="terms"] iframe,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section [class*="policy"] iframe {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    inline-size: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    min-height: 920px !important;
    height: clamp(920px, 90vh, 1200px) !important;
    max-height: none !important;
    overflow: auto !important;
    border: 1px solid rgba(0, 208, 132, .24) !important;
    border-radius: 10px !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section iframe,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section object,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section embed {
    aspect-ratio: auto !important;
}

@media (max-width: 900px) {
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section iframe,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section object,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section embed,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section textarea,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .modal-body,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .card,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .well {
        min-height: 700px !important;
        height: 78vh !important;
    }
}

/* v1.0.103 - Make missed registration fields obvious and expand Steam help. */
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-profile-display-toprow {
    grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr) !important;
    align-items: stretch !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-steam-help-panel {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    gap: .62rem !important;
    height: 100% !important;
    min-height: 0 !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-steam-help-head {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: .58rem !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-steam-help-body {
    padding: .58rem .64rem !important;
    border: 1px solid rgba(0, 208, 132, .18) !important;
    border-radius: 11px !important;
    background: rgba(0,0,0,.15) !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-steam-help-body strong {
    display: block !important;
    margin: 0 0 .36rem !important;
    color: var(--bl-green-bright) !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-steam-help-body ol {
    margin: 0 !important;
    padding-left: 1.1rem !important;
    color: rgba(243,247,245,.84) !important;
    font-size: .68rem !important;
    line-height: 1.38 !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-steam-help-body li + li {
    margin-top: .24rem !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-steam-help-body p {
    margin: .46rem 0 0 !important;
    color: rgba(243,247,245,.62) !important;
    font-size: .62rem !important;
    line-height: 1.32 !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-steam-examples {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-missing {
    position: relative !important;
    border-color: rgba(255, 66, 66, .72) !important;
    background: linear-gradient(90deg, rgba(255, 45, 45, .135), rgba(255, 45, 45, .045)) !important;
    box-shadow: inset 4px 0 0 rgba(255, 66, 66, .86), 0 0 0 1px rgba(255, 66, 66, .22) !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-missing .control-label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-missing .control-label label,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-missing > label {
    color: #ff5a5a !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form.bl-show-required-errors input:required:invalid,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form.bl-show-required-errors select:required:invalid,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form.bl-show-required-errors textarea:required:invalid,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-missing input,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-missing select,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-missing textarea {
    border-color: rgba(255, 66, 66, .90) !important;
    background: #fff5f5 !important;
    color: #220707 !important;
    box-shadow: 0 0 0 2px rgba(255, 66, 66, .20), inset 0 1px rgba(255,255,255,.75) !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-missing input[type="checkbox"],
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-field-missing input[type="radio"] {
    outline: 2px solid rgba(255, 66, 66, .95) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(255, 66, 66, .16) !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-required-inline-warning {
    display: block !important;
    margin-top: .18rem !important;
    color: #ff6b6b !important;
    font-size: .6rem !important;
    font-weight: 900 !important;
    letter-spacing: .03em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

@media (max-width: 900px) {
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-profile-display-toprow {
        grid-template-columns: 1fr !important;
    }
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-steam-examples {
        grid-template-columns: 1fr !important;
    }
}

/* v1.0.104 - Split Terms/AUP into a large policy viewer and compact agreement controls. */
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .controls[data-bl-terms-layout-ready="1"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(160px, 210px) !important;
    align-items: start !important;
    gap: .75rem !important;
    width: 100% !important;
    max-width: none !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-policy-viewer {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-policy-viewer > *,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-policy-viewer iframe,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-policy-viewer object,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-policy-viewer embed,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-policy-viewer textarea,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-policy-viewer .card,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-policy-viewer .well,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-policy-viewer .modal-body,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-policy-viewer [class*="article"],
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-policy-viewer [class*="terms"],
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-policy-viewer [class*="policy"] {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    inline-size: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-policy-viewer iframe,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-policy-viewer object,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-policy-viewer embed,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-policy-viewer textarea,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-policy-viewer .card,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-policy-viewer .well,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-policy-viewer .modal-body {
    min-height: 760px !important;
    height: clamp(760px, 76vh, 980px) !important;
    max-height: none !important;
    overflow: auto !important;
    border: 1px solid rgba(0, 208, 132, .24) !important;
    border-radius: 10px !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-agreement-box {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    gap: .45rem !important;
    width: 100% !important;
    max-width: 210px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: .58rem .6rem !important;
    border: 1px solid rgba(0, 208, 132, .20) !important;
    border-radius: 10px !important;
    background: rgba(0, 25, 17, .42) !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-agreement-box > strong {
    display: block !important;
    margin: 0 0 .12rem !important;
    color: var(--bl-green-bright) !important;
    font-size: .62rem !important;
    font-weight: 950 !important;
    letter-spacing: .09em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-agreement-box .bl-terms-agreement-option,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-agreement-box .form-check,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-agreement-box .radio,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-agreement-box .checkbox,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-agreement-box label {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .42rem !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: .36rem .4rem !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 8px !important;
    background: rgba(0,0,0,.14) !important;
    color: rgba(243,247,245,.90) !important;
    font-size: .7rem !important;
    font-weight: 850 !important;
    line-height: 1.22 !important;
    text-align: left !important;
    text-transform: uppercase !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-agreement-box input[type="checkbox"],
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-agreement-box input[type="radio"] {
    flex: 0 0 16px !important;
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    margin: 0 !important;
}

@media (max-width: 900px) {
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-terms-section .controls[data-bl-terms-layout-ready="1"] {
        grid-template-columns: 1fr !important;
    }
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-agreement-box {
        max-width: none !important;
    }
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-policy-viewer iframe,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-policy-viewer object,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-policy-viewer embed,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-policy-viewer textarea,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-policy-viewer .card,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-policy-viewer .well,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-terms-policy-viewer .modal-body {
        min-height: 620px !important;
        height: 72vh !important;
    }
}

/* v1.0.105 - Revert top registration side panel; move Steam help into the BEERLEAGUE Stats card below User Registration. */
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-profile-display-toprow {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 230px) !important;
    gap: .85rem !important;
    align-items: start !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-side-panel:not(.bl-registration-steam-help-panel) {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: start !important;
    align-content: start !important;
    gap: .55rem !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-side-panel:not(.bl-registration-steam-help-panel) .bl-registration-mini-notes {
    grid-column: 1 / -1 !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-steam-help-inline {
    margin: .72rem 0 0 !important;
    padding: .62rem .68rem !important;
    border: 1px solid rgba(0, 208, 132, .18) !important;
    border-radius: 11px !important;
    background: rgba(0,0,0,.15) !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-steam-help-inline strong {
    display: block !important;
    margin: 0 0 .38rem !important;
    color: var(--bl-green-bright) !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    letter-spacing: .04em !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-steam-help-inline ol {
    margin: 0 !important;
    padding-left: 1.12rem !important;
    color: rgba(243,247,245,.84) !important;
    font-size: .68rem !important;
    line-height: 1.38 !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-steam-help-inline li + li {
    margin-top: .22rem !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-steam-help-inline p {
    margin: .48rem 0 0 !important;
    color: rgba(243,247,245,.62) !important;
    font-size: .62rem !important;
    line-height: 1.32 !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-steam-help-examples {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .4rem !important;
    margin-top: .52rem !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-steam-help-examples span {
    display: block !important;
    min-width: 0 !important;
    padding: .42rem .48rem !important;
    border: 1px solid rgba(0, 208, 132, .14) !important;
    border-radius: 9px !important;
    background: rgba(0,0,0,.14) !important;
    color: rgba(243,247,245,.70) !important;
    font-size: .6rem !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
}

@media (max-width: 900px) {
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-steam-help-examples {
        grid-template-columns: 1fr !important;
    }
}

/* v1.0.106 - Make the BEERLEAGUE Stats registration card span the full page width. */
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-profile-grid > .bl-registration-card-beerleague-stats,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-profile-grid > .bl-registration-card-beerleague-stats {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-profile-stats-link-card {
    width: 100% !important;
    max-width: none !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-profile-stats-link-card p {
    max-width: none !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-steamid,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-steam-id {
    grid-template-columns: minmax(145px, 220px) minmax(320px, 560px) minmax(0, 1fr) !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-steamid .controls,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-steam-id .controls {
    max-width: 560px !important;
    width: 100% !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-steamid input,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-steam-id input {
    max-width: 560px !important;
    width: 100% !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-registration-steam-help-inline {
    width: 100% !important;
    max-width: none !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-registration-steam-help-examples {
    grid-template-columns: repeat(2, minmax(240px, 1fr)) !important;
}

@media (max-width: 900px) {
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-steamid,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-field-steam-id {
        grid-template-columns: 1fr !important;
    }
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-beerleague-stats .bl-registration-steam-help-examples {
        grid-template-columns: 1fr !important;
    }
}

/* v1.0.107 - Explicitly full-span the generated BEERLEAGUE Stats fieldset.
   v1.0.106 relied on the fieldset already having a specific class. Add an
   explicit render-time class and also fall back to :has() so the stats card
   spans the full registration grid even if Joomla changes fieldset names. */
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-profile-grid > .bl-registration-card-stats-fullwidth,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-profile-grid > .bl-registration-card-stats-fullwidth,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-profile-grid > fieldset:has(.bl-registration-steam-help-inline),
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-profile-grid > fieldset:has(.bl-registration-steam-help-inline) {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-card-stats-fullwidth .bl-registration-steam-help-inline,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form fieldset:has(.bl-registration-steam-help-inline) .bl-registration-steam-help-inline {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
}

/* v1.0.108 - Re-align the top "Create your BEERLEAGUE account" panel.
   The top helper panel should be a balanced right card beside User Registration,
   not a tiny floating 190px sidebar. */
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-toprow.bl-profile-display-toprow,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-profile-display-toprow.bl-registration-toprow {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(285px, 340px) !important;
    align-items: stretch !important;
    gap: .85rem !important;
    width: 100% !important;
    max-width: none !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-toprow .bl-registration-core,
.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-toprow .bl-registration-core > fieldset {
    height: 100% !important;
    min-height: 0 !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-toprow .bl-registration-side-panel {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    justify-items: center !important;
    gap: .7rem !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: .92rem .86rem !important;
    text-align: center !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-toprow .bl-registration-side-panel .bl-registration-icon {
    width: 84px !important;
    height: 84px !important;
    margin: 0 auto !important;
    font-size: 1.42rem !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-toprow .bl-registration-side-panel .bl-registration-copy {
    display: grid !important;
    gap: .18rem !important;
    width: 100% !important;
    max-width: 260px !important;
    text-align: center !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-toprow .bl-registration-side-panel .bl-registration-copy strong {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: .86rem !important;
    line-height: 1.12 !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-toprow .bl-registration-side-panel .bl-registration-copy span {
    font-size: .64rem !important;
    line-height: 1.28 !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-toprow .bl-registration-side-panel .bl-registration-mini-notes {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .48rem !important;
    width: 100% !important;
    max-width: none !important;
}

.bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-toprow .bl-registration-side-panel .bl-registration-mini-notes > div {
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
}

@media (max-width: 900px) {
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-toprow.bl-profile-display-toprow,
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-profile-display-toprow.bl-registration-toprow {
        grid-template-columns: 1fr !important;
    }
    .bl-main .bl-account-registration-page #member-registration.bl-user-registration-form .bl-registration-toprow .bl-registration-side-panel {
        height: auto !important;
    }
}


/* v1.0.114 - Emergency rollback baseline.
   Restores registration template to v1.0.108 behavior and intentionally omits
   the later Terms close/black/auto-load/inline-fetch scripts from v1.0.109-v1.0.113. */


/* v1.0.115 - force readable frontend dropdown menu text before hover. */
.bl-top-menu li > ul,
.bl-top-menu .nav-item > ul,
.bl-top-menu .deeper > ul,
.bl-top-menu .parent > ul,
.bl-top-menu .mod-menu__sub,
.bl-top-menu .dropdown-menu,
.bl-top-utility-area .bl-top-menu li > ul,
.bl-top-utility-area .bl-top-menu .mod-menu__sub,
.bl-top-utility-area .bl-top-menu .dropdown-menu,
.bl-top-login-area .bl-top-menu li > ul,
.bl-top-login-area .bl-top-menu .mod-menu__sub,
.bl-top-login-area .bl-top-menu .dropdown-menu {
    color: #f7ffe8 !important;
    background: linear-gradient(135deg, rgba(2, 18, 12, .99), rgba(5, 42, 30, .99)) !important;
    border-color: rgba(0, 220, 154, .58) !important;
}
.bl-top-menu li > ul a,
.bl-top-menu li > ul .nav-link,
.bl-top-menu li > ul span,
.bl-top-menu .nav-item > ul a,
.bl-top-menu .nav-item > ul .nav-link,
.bl-top-menu .nav-item > ul span,
.bl-top-menu .mod-menu__sub a,
.bl-top-menu .mod-menu__sub .nav-link,
.bl-top-menu .mod-menu__sub span,
.bl-top-menu .dropdown-menu a,
.bl-top-menu .dropdown-menu .nav-link,
.bl-top-menu .dropdown-menu span,
.bl-top-utility-area .bl-top-menu li > ul a,
.bl-top-utility-area .bl-top-menu li > ul .nav-link,
.bl-top-utility-area .bl-top-menu .mod-menu__sub a,
.bl-top-utility-area .bl-top-menu .mod-menu__sub .nav-link,
.bl-top-utility-area .bl-top-menu .dropdown-menu a,
.bl-top-utility-area .bl-top-menu .dropdown-menu .nav-link,
.bl-top-login-area .bl-top-menu li > ul a,
.bl-top-login-area .bl-top-menu li > ul .nav-link,
.bl-top-login-area .bl-top-menu .mod-menu__sub a,
.bl-top-login-area .bl-top-menu .mod-menu__sub .nav-link,
.bl-top-login-area .bl-top-menu .dropdown-menu a,
.bl-top-login-area .bl-top-menu .dropdown-menu .nav-link {
    color: #f7ffe8 !important;
    -webkit-text-fill-color: #f7ffe8 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.92) !important;
    background: rgba(255,255,255,.055) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.bl-top-menu li > ul a:hover,
.bl-top-menu li > ul a:focus,
.bl-top-menu li > ul .nav-link:hover,
.bl-top-menu li > ul .nav-link:focus,
.bl-top-menu .mod-menu__sub a:hover,
.bl-top-menu .mod-menu__sub a:focus,
.bl-top-menu .mod-menu__sub .nav-link:hover,
.bl-top-menu .mod-menu__sub .nav-link:focus,
.bl-top-menu .dropdown-menu a:hover,
.bl-top-menu .dropdown-menu a:focus,
.bl-top-menu .dropdown-menu .nav-link:hover,
.bl-top-menu .dropdown-menu .nav-link:focus,
.bl-top-menu li > ul .current > a,
.bl-top-menu li > ul .active > a,
.bl-top-menu .mod-menu__sub .current > a,
.bl-top-menu .mod-menu__sub .active > a,
.bl-top-menu .dropdown-menu .current > a,
.bl-top-menu .dropdown-menu .active > a {
    color: #101006 !important;
    -webkit-text-fill-color: #101006 !important;
    background: linear-gradient(135deg, #ffd35a, #ff9f1a) !important;
    border-color: rgba(255,211,90,.9) !important;
    text-shadow: none !important;
}
.bl-top-menu li > ul a:visited,
.bl-top-menu .mod-menu__sub a:visited,
.bl-top-menu .dropdown-menu a:visited {
    color: #f7ffe8 !important;
    -webkit-text-fill-color: #f7ffe8 !important;
}
.bl-top-menu li > ul a:hover:visited,
.bl-top-menu li > ul a:focus:visited,
.bl-top-menu .mod-menu__sub a:hover:visited,
.bl-top-menu .mod-menu__sub a:focus:visited,
.bl-top-menu .dropdown-menu a:hover:visited,
.bl-top-menu .dropdown-menu a:focus:visited {
    color: #101006 !important;
    -webkit-text-fill-color: #101006 !important;
}


/* v1.0.116 - account/login/header dropdown contrast hardening. */
.bl-top-login-area .dropdown-menu,
.bl-top-login-area .joomla-dropdown,
.bl-top-login-area [class*="dropdown-menu"],
.bl-top-login-module .dropdown-menu,
.bl-top-login-module .joomla-dropdown,
.bl-top-login-module [class*="dropdown-menu"],
.bl-top-utility-area .dropdown-menu,
.bl-top-utility-area .joomla-dropdown,
.bl-top-utility-area [class*="dropdown-menu"],
.bl-header .dropdown-menu,
.bl-header .joomla-dropdown,
.bl-header [class*="dropdown-menu"] {
    color: #f7ffe8 !important;
    background: linear-gradient(135deg, rgba(2,18,12,.99), rgba(5,42,30,.99)) !important;
    border: 1px solid rgba(0,220,154,.58) !important;
    box-shadow: 0 18px 34px rgba(0,0,0,.55), 0 0 18px rgba(0,220,154,.16) !important;
}
.bl-top-login-area .dropdown-menu *,
.bl-top-login-area .joomla-dropdown *,
.bl-top-login-area [class*="dropdown-menu"] *,
.bl-top-login-module .dropdown-menu *,
.bl-top-login-module .joomla-dropdown *,
.bl-top-login-module [class*="dropdown-menu"] *,
.bl-top-utility-area .dropdown-menu *,
.bl-top-utility-area .joomla-dropdown *,
.bl-top-utility-area [class*="dropdown-menu"] *,
.bl-header .dropdown-menu *,
.bl-header .joomla-dropdown *,
.bl-header [class*="dropdown-menu"] * {
    color: #f7ffe8 !important;
    -webkit-text-fill-color: #f7ffe8 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.92) !important;
}
.bl-top-login-area .dropdown-menu a,
.bl-top-login-area .dropdown-menu .dropdown-item,
.bl-top-login-area .dropdown-menu button,
.bl-top-login-area .dropdown-menu [role="menuitem"],
.bl-top-login-area .joomla-dropdown a,
.bl-top-login-area .joomla-dropdown button,
.bl-top-login-module .dropdown-menu a,
.bl-top-login-module .dropdown-menu .dropdown-item,
.bl-top-login-module .dropdown-menu button,
.bl-top-login-module .dropdown-menu [role="menuitem"],
.bl-top-login-module .joomla-dropdown a,
.bl-top-login-module .joomla-dropdown button,
.bl-top-utility-area .dropdown-menu a,
.bl-top-utility-area .dropdown-menu .dropdown-item,
.bl-top-utility-area .dropdown-menu button,
.bl-top-utility-area .dropdown-menu [role="menuitem"],
.bl-top-utility-area .joomla-dropdown a,
.bl-top-utility-area .joomla-dropdown button,
.bl-header .dropdown-menu a,
.bl-header .dropdown-menu .dropdown-item,
.bl-header .dropdown-menu button,
.bl-header .dropdown-menu [role="menuitem"],
.bl-header .joomla-dropdown a,
.bl-header .joomla-dropdown button {
    display: flex !important;
    align-items: center !important;
    gap: .45rem !important;
    color: #f7ffe8 !important;
    -webkit-text-fill-color: #f7ffe8 !important;
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 9px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.92) !important;
    opacity: 1 !important;
}
.bl-top-login-area .dropdown-menu a:hover,
.bl-top-login-area .dropdown-menu a:focus,
.bl-top-login-area .dropdown-menu .dropdown-item:hover,
.bl-top-login-area .dropdown-menu .dropdown-item:focus,
.bl-top-login-area .dropdown-menu button:hover,
.bl-top-login-area .dropdown-menu button:focus,
.bl-top-login-area .joomla-dropdown a:hover,
.bl-top-login-area .joomla-dropdown a:focus,
.bl-top-login-area .joomla-dropdown button:hover,
.bl-top-login-area .joomla-dropdown button:focus,
.bl-top-login-module .dropdown-menu a:hover,
.bl-top-login-module .dropdown-menu a:focus,
.bl-top-login-module .dropdown-menu .dropdown-item:hover,
.bl-top-login-module .dropdown-menu .dropdown-item:focus,
.bl-top-login-module .dropdown-menu button:hover,
.bl-top-login-module .dropdown-menu button:focus,
.bl-top-login-module .joomla-dropdown a:hover,
.bl-top-login-module .joomla-dropdown a:focus,
.bl-top-login-module .joomla-dropdown button:hover,
.bl-top-login-module .joomla-dropdown button:focus,
.bl-top-utility-area .dropdown-menu a:hover,
.bl-top-utility-area .dropdown-menu a:focus,
.bl-top-utility-area .dropdown-menu .dropdown-item:hover,
.bl-top-utility-area .dropdown-menu .dropdown-item:focus,
.bl-top-utility-area .dropdown-menu button:hover,
.bl-top-utility-area .dropdown-menu button:focus,
.bl-top-utility-area .joomla-dropdown a:hover,
.bl-top-utility-area .joomla-dropdown a:focus,
.bl-top-utility-area .joomla-dropdown button:hover,
.bl-top-utility-area .joomla-dropdown button:focus,
.bl-header .dropdown-menu a:hover,
.bl-header .dropdown-menu a:focus,
.bl-header .dropdown-menu .dropdown-item:hover,
.bl-header .dropdown-menu .dropdown-item:focus,
.bl-header .dropdown-menu button:hover,
.bl-header .dropdown-menu button:focus,
.bl-header .joomla-dropdown a:hover,
.bl-header .joomla-dropdown a:focus,
.bl-header .joomla-dropdown button:hover,
.bl-header .joomla-dropdown button:focus {
    color: #101006 !important;
    -webkit-text-fill-color: #101006 !important;
    background: linear-gradient(135deg, #ffd35a, #ff9f1a) !important;
    border-color: rgba(255,211,90,.92) !important;
    text-shadow: none !important;
}
.bl-top-login-area .dropdown-menu svg,
.bl-top-login-area .dropdown-menu [class^="icon-"],
.bl-top-login-area .dropdown-menu [class*=" icon-"],
.bl-top-login-module .dropdown-menu svg,
.bl-top-login-module .dropdown-menu [class^="icon-"],
.bl-top-login-module .dropdown-menu [class*=" icon-"],
.bl-top-utility-area .dropdown-menu svg,
.bl-top-utility-area .dropdown-menu [class^="icon-"],
.bl-top-utility-area .dropdown-menu [class*=" icon-"],
.bl-header .dropdown-menu svg,
.bl-header .dropdown-menu [class^="icon-"],
.bl-header .dropdown-menu [class*=" icon-"] {
    color: inherit !important;
    fill: currentColor !important;
}

/* v1.0.118 - Polish Joomla login-time multi-factor authentication method pages. */
.bl-main .com-users-methods,
.bl-main .com-users-methodselect,
.bl-main .com-users-captive,
.bl-main .com-users-captive-select,
.bl-main .com-users-mfa,
.bl-main .com-users-multifactor,
.bl-main [class*="com-users-method"] {
    max-width: 980px !important;
    margin-inline: auto !important;
}

.bl-main .com-users-methods h1,
.bl-main .com-users-methodselect h1,
.bl-main .com-users-captive h1,
.bl-main .com-users-captive-select h1,
.bl-main .com-users-mfa h1,
.bl-main .com-users-multifactor h1,
.bl-main [class*="com-users-method"] h1 {
    margin: 0 0 .7rem !important;
    color: #ffffff !important;
    font-size: clamp(1.35rem, 2vw, 1.85rem) !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .42) !important;
}

.bl-main .com-users-methods p,
.bl-main .com-users-methodselect p,
.bl-main .com-users-captive p,
.bl-main .com-users-captive-select p,
.bl-main .com-users-mfa p,
.bl-main .com-users-multifactor p {
    max-width: 720px !important;
    margin: 0 0 1rem !important;
    color: rgba(244, 248, 246, .82) !important;
    line-height: 1.45 !important;
}

.bl-main .com-users-methods-list,
.bl-main .mfa-methods-list,
.bl-main .com-users-methodselect .options-list,
.bl-main .com-users-captive .options-list,
.bl-main .com-users-mfa .options-list,
.bl-main .com-users-multifactor .options-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: .72rem !important;
    width: 100% !important;
    max-width: none !important;
    margin: 1rem 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.bl-main .com-users-methods-list > *,
.bl-main .mfa-methods-list > *,
.bl-main .com-users-methodselect .options-list > *,
.bl-main .com-users-captive .options-list > *,
.bl-main .com-users-mfa .options-list > *,
.bl-main .com-users-multifactor .options-list > *,
.bl-main .com-users-methods-list-method,
.bl-main .mfa-method {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.bl-main .com-users-methods-list > a,
.bl-main .mfa-methods-list > a,
.bl-main .com-users-methods-list-method,
.bl-main .mfa-method,
.bl-main .com-users-methods-list > li > a,
.bl-main .mfa-methods-list > li > a,
.bl-main .com-users-methodselect .options-list > li > a,
.bl-main .com-users-captive .options-list > li > a,
.bl-main .com-users-mfa .options-list > li > a,
.bl-main .com-users-multifactor .options-list > li > a,
.bl-main .com-users-methods-list form,
.bl-main .mfa-methods-list form {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: .56rem .72rem !important;
    min-height: 96px !important;
    height: 100% !important;
    padding: .86rem .92rem !important;
    border: 1px solid rgba(0, 208, 132, .35) !important;
    border-radius: 10px !important;
    background:
        linear-gradient(135deg, rgba(0, 208, 132, .16), rgba(0, 0, 0, .18) 54%),
        rgba(0, 22, 14, .78) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 14px 30px rgba(0, 0, 0, .22) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: border-color .16s ease, transform .16s ease, background .16s ease !important;
}

.bl-main .com-users-methods-list > a:hover,
.bl-main .mfa-methods-list > a:hover,
.bl-main .com-users-methods-list-method:hover,
.bl-main .mfa-method:hover,
.bl-main .com-users-methods-list > li > a:hover,
.bl-main .mfa-methods-list > li > a:hover,
.bl-main .com-users-methodselect .options-list > li > a:hover,
.bl-main .com-users-captive .options-list > li > a:hover,
.bl-main .com-users-mfa .options-list > li > a:hover,
.bl-main .com-users-multifactor .options-list > li > a:hover {
    border-color: rgba(0, 255, 164, .72) !important;
    background:
        linear-gradient(135deg, rgba(0, 208, 132, .24), rgba(0, 0, 0, .12) 54%),
        rgba(0, 28, 18, .86) !important;
    transform: translateY(-1px) !important;
}

.bl-main .com-users-methods-list img,
.bl-main .com-users-methods-list svg,
.bl-main .mfa-methods-list img,
.bl-main .mfa-methods-list svg,
.bl-main .com-users-methods-list-method img,
.bl-main .com-users-methods-list-method svg,
.bl-main .mfa-method img,
.bl-main .mfa-method svg,
.bl-main .com-users-methodselect .options-list img,
.bl-main .com-users-captive .options-list img {
    grid-row: 1 / span 2 !important;
    display: block !important;
    width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: .25rem !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .08) !important;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .34)) !important;
}

.bl-main .com-users-methods-list h2,
.bl-main .com-users-methods-list h3,
.bl-main .com-users-methods-list h4,
.bl-main .com-users-methods-list strong,
.bl-main .com-users-methods-list .com-users-methods-list-method-title,
.bl-main .mfa-methods-list h2,
.bl-main .mfa-methods-list h3,
.bl-main .mfa-methods-list h4,
.bl-main .mfa-methods-list strong,
.bl-main .mfa-method h2,
.bl-main .mfa-method h3,
.bl-main .mfa-method strong,
.bl-main .com-users-methodselect .options-list strong,
.bl-main .com-users-captive .options-list strong {
    display: block !important;
    min-width: 0 !important;
    margin: 0 0 .14rem !important;
    color: #ffffff !important;
    font-size: .92rem !important;
    line-height: 1.12 !important;
    letter-spacing: .02em !important;
    overflow-wrap: anywhere !important;
    text-shadow: none !important;
}

.bl-main .com-users-methods-list p,
.bl-main .com-users-methods-list small,
.bl-main .com-users-methods-list span,
.bl-main .com-users-methods-list .com-users-methods-list-method-description,
.bl-main .mfa-methods-list p,
.bl-main .mfa-methods-list small,
.bl-main .mfa-methods-list span,
.bl-main .mfa-method p,
.bl-main .mfa-method small,
.bl-main .mfa-method span,
.bl-main .com-users-methodselect .options-list span,
.bl-main .com-users-captive .options-list span {
    min-width: 0 !important;
    margin: 0 !important;
    color: rgba(244, 248, 246, .74) !important;
    font-size: .72rem !important;
    line-height: 1.28 !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
}

.bl-main .com-users-methods-list .btn,
.bl-main .mfa-methods-list .btn,
.bl-main .com-users-captive .btn,
.bl-main .com-users-mfa .btn,
.bl-main .com-users-multifactor .btn {
    width: auto !important;
    min-width: 112px !important;
    min-height: 34px !important;
    justify-self: start !important;
    border-radius: 8px !important;
    white-space: normal !important;
}

.bl-main .com-users-captive input[type="text"],
.bl-main .com-users-captive input[type="password"],
.bl-main .com-users-captive input[type="number"],
.bl-main .com-users-mfa input[type="text"],
.bl-main .com-users-mfa input[type="password"],
.bl-main .com-users-mfa input[type="number"],
.bl-main .com-users-multifactor input[type="text"],
.bl-main .com-users-multifactor input[type="password"],
.bl-main .com-users-multifactor input[type="number"] {
    max-width: 420px !important;
    width: 100% !important;
}

@media (max-width: 720px) {
    .bl-main .com-users-methods-list,
    .bl-main .mfa-methods-list,
    .bl-main .com-users-methodselect .options-list,
    .bl-main .com-users-captive .options-list,
    .bl-main .com-users-mfa .options-list,
    .bl-main .com-users-multifactor .options-list {
        grid-template-columns: 1fr !important;
    }

    .bl-main .com-users-methods-list > a,
    .bl-main .mfa-methods-list > a,
    .bl-main .com-users-methods-list-method,
    .bl-main .mfa-method,
    .bl-main .com-users-methods-list > li > a,
    .bl-main .mfa-methods-list > li > a,
    .bl-main .com-users-methodselect .options-list > li > a,
    .bl-main .com-users-captive .options-list > li > a,
    .bl-main .com-users-mfa .options-list > li > a,
    .bl-main .com-users-multifactor .options-list > li > a,
    .bl-main .com-users-methods-list form,
    .bl-main .mfa-methods-list form {
        min-height: 0 !important;
        grid-template-columns: 40px minmax(0, 1fr) !important;
        padding: .72rem !important;
    }

    .bl-main .com-users-methods-list img,
    .bl-main .com-users-methods-list svg,
    .bl-main .mfa-methods-list img,
    .bl-main .mfa-methods-list svg,
    .bl-main .com-users-methods-list-method img,
    .bl-main .com-users-methods-list-method svg,
    .bl-main .mfa-method img,
    .bl-main .mfa-method svg,
    .bl-main .com-users-methodselect .options-list img,
    .bl-main .com-users-captive .options-list img {
        width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        max-height: 36px !important;
    }
}