/* =============================================================================
   Roll Ball Sri Lanka - Front-end design system
   -----------------------------------------------------------------------------
   Polish layer loaded AFTER federation-custom.css. It adds a cohesive, sports-
   oriented component set (avatars, section headers, card interactions, hero
   accents, scroll reveal) without changing the brand palette: #ff6600 accent on
   the dark navy (#0f172a / #1e293b) surfaces the public site already uses.
   Nothing here is !important-heavy; it refines, it does not fight the cascade.
   ========================================================================== */

:root {
    --rbsl-accent: #ff6600;
    --rbsl-accent-deep: #ea580c;
    --rbsl-ink: #0f172a;
    --rbsl-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Visually-hidden text for screen readers (avatar names, etc.). */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* -----------------------------------------------------------------------------
   1. Avatar (photo or initials)
   -------------------------------------------------------------------------- */
.rbsl-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--rbsl-surface-dark);
}

.rbsl-avatar--ring {
    background: linear-gradient(135deg, var(--rbsl-accent) 0%, var(--rbsl-accent-deep) 100%);
    box-shadow: 0 6px 18px rgba(var(--rbsl-orange-rgb), 0.28);
}

.rbsl-avatar__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: var(--rbsl-surface-dark);
    z-index: 1;
}

/* With the ring, the image inset must sit inside the padding. */
/* An absolutely positioned <img> with width/height:auto sizes itself from its
   intrinsic aspect ratio and ignores the insets, so object-fit:cover never got
   a square box to work with: a 2:1 flag rendered at half height inside the
   circle and the initials underneath showed through. Sizing it explicitly
   against the same pad the partial applies fixes every non-square photo. */
.rbsl-avatar--ring .rbsl-avatar__img {
    inset: var(--rbsl-ring-pad, 4px);
    width: calc(100% - 2 * var(--rbsl-ring-pad, 4px));
    height: calc(100% - 2 * var(--rbsl-ring-pad, 4px));
}

.rbsl-avatar__initials {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto Condensed', 'Inter', sans-serif;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: var(--rbsl-text-inverse);
    background:
        radial-gradient(circle at 30% 25%, rgba(var(--rbsl-orange-rgb), 0.28), transparent 60%),
        var(--rbsl-gradient-dark-deep);
    text-shadow: 0 2px 6px rgba(var(--rbsl-black-rgb), 0.5);
    user-select: none;
}

/* -----------------------------------------------------------------------------
   2. Section header (eyebrow + title + accent bar)
   -------------------------------------------------------------------------- */
.rbsl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--rbsl-accent);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.rbsl-eyebrow::before {
    content: "";
    width: 26px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--rbsl-accent), transparent);
}

/* -----------------------------------------------------------------------------
   3. Card interaction polish
   Applies a consistent, GPU-cheap lift + accent border on hover to the inline-
   styled cards already on the page, via lightweight hook classes.
   -------------------------------------------------------------------------- */
.rbsl-lift {
    transition: transform 0.35s var(--rbsl-ease), box-shadow 0.35s var(--rbsl-ease), border-color 0.35s var(--rbsl-ease);
    will-change: transform;
}

.rbsl-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(var(--rbsl-black-rgb), 0.45);
    border-color: rgba(var(--rbsl-orange-rgb), 0.6) !important;
}

/* The featured athlete photo gets a subtle zoom inside its ring on card hover. */
.rbsl-lift:hover .rbsl-avatar__img {
    transform: scale(1.06);
    transition: transform 0.5s var(--rbsl-ease);
}

/* -----------------------------------------------------------------------------
   4. Hero stat strip
   -------------------------------------------------------------------------- */
.rbsl-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.rbsl-hero-stat {
    position: relative;
    padding: 12px 22px 12px 18px;
    background: rgba(var(--rbsl-white-rgb), 0.05);
    border: 1px solid rgba(var(--rbsl-white-rgb), 0.12);
    border-left: 3px solid var(--rbsl-accent);
    border-radius: 10px;
    backdrop-filter: blur(4px);
}

.rbsl-hero-stat__num {
    display: block;
    font-family: 'Roboto Condensed', 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    color: var(--rbsl-text-inverse);
}

.rbsl-hero-stat__label {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--rbsl-text-inverse-muted);
}

/* A dynamic diagonal accent on the hero's trailing edge (desktop only). */
.rbsl-hero-accent {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 38%;
    pointer-events: none;
    background:
        linear-gradient(120deg, transparent 0%, transparent 55%, rgba(var(--rbsl-orange-rgb), 0.10) 55.5%, rgba(var(--rbsl-orange-rgb), 0.10) 60%, transparent 60.5%),
        linear-gradient(120deg, transparent 0%, transparent 70%, rgba(var(--rbsl-orange-rgb), 0.16) 70.5%, rgba(var(--rbsl-orange-rgb), 0.16) 72.5%, transparent 73%);
    z-index: 1;
}

@media (max-width: 900px) {
    .rbsl-hero-accent { display: none; }
}

/* -----------------------------------------------------------------------------
   5. Scroll reveal
   Default state is fully visible, so with no JS (or reduced motion) nothing is
   ever hidden. The body gets .rbsl-js once the observer is wired; only then do
   reveal elements start offset, and .is-visible animates them in.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .rbsl-js .fade-in-up,
    .rbsl-js .rbsl-reveal {
        opacity: 0;
        transform: translateY(26px);
        transition: opacity 0.6s var(--rbsl-ease), transform 0.6s var(--rbsl-ease);
    }

    .rbsl-js .fade-in-up.is-visible,
    .rbsl-js .rbsl-reveal.is-visible {
        opacity: 1;
        transform: none;
    }
}

/* -----------------------------------------------------------------------------
   6. Button micro-interaction + accessible focus
   -------------------------------------------------------------------------- */
.squad-btn {
    transition: transform 0.25s var(--rbsl-ease), box-shadow 0.25s var(--rbsl-ease), filter 0.25s var(--rbsl-ease);
}

.squad-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.squad-btn:focus-visible,
.rbsl-lift a:focus-visible {
    outline: 3px solid var(--rbsl-accent);
    outline-offset: 3px;
    border-radius: 8px;
}

/* -----------------------------------------------------------------------------
   7. Section rhythm helpers
   -------------------------------------------------------------------------- */
.rbsl-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--rbsl-orange-rgb), 0.35), transparent);
    border: 0;
    margin: 0;
}

/* Keep the partner/sponsor chips from looking cramped on small screens. */
@media (max-width: 600px) {
    .rbsl-hero-stat { padding: 10px 16px; flex: 1 1 calc(50% - 14px); }
    .rbsl-hero-stat__num { font-size: 22px; }
}

/* -----------------------------------------------------------------------------
   8. Homepage dark panels
   .dark-section / .upcoming-section force white headings but shipped without a
   background, so the one section that relied on the class alone rendered white-
   on-light in light theme. These are sports panels that are dark in both themes;
   sections that set their own inline background keep it (inline wins).
   -------------------------------------------------------------------------- */
.dark-section {
    background-color: var(--rbsl-surface-dark);
}

.upcoming-section {
    background: var(--rbsl-gradient-dark-vertical);
}

/* -----------------------------------------------------------------------------
   9. Interior page-title band
   Replaces the plain navy strip shared by every secondary page with a sports-
   textured band: a subtle diagonal line pattern (court/track marking motif), a
   breadcrumb trail, and a centred accent bar under the title.
   -------------------------------------------------------------------------- */
.rbsl-page-title-wrap {
    position: relative;
    overflow: hidden;
}

.rbsl-page-title-texture {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
    background-image:
        repeating-linear-gradient(45deg, rgba(var(--rbsl-orange-rgb), 0.07) 0px, rgba(var(--rbsl-orange-rgb), 0.07) 1px, transparent 1px, transparent 26px),
        radial-gradient(circle at 85% 20%, rgba(var(--rbsl-orange-rgb), 0.14), transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(var(--rbsl-orange-rgb), 0.08), transparent 40%);
}

.rbsl-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.rbsl-breadcrumb a {
    color: var(--rbsl-text-inverse-subtle) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.rbsl-breadcrumb a:hover {
    color: var(--rbsl-accent) !important;
}

.rbsl-breadcrumb__sep {
    color: rgba(var(--rbsl-orange-rgb), 0.6);
}

.rbsl-breadcrumb__current {
    color: var(--rbsl-accent) !important;
}

.rbsl-page-title-accent {
    display: block;
    width: 70px;
    height: 4px;
    margin: 16px auto 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--rbsl-accent), var(--rbsl-accent-deep));
    box-shadow: 0 0 14px rgba(var(--rbsl-orange-rgb), 0.5);
}

@media (max-width: 600px) {
    .rbsl-breadcrumb { font-size: 11px; letter-spacing: 1px; flex-wrap: wrap; }
}

/* -----------------------------------------------------------------------------
   10. Resilient tab navigation
   Several interior pages (rankings, documents, etc.) use Bootstrap 3's
   .nav-tabs / .nav-pills component. Bootstrap's own CSS is loaded from a CDN;
   if that single stylesheet is ever slow, blocked, or unavailable the list
   items fall back to the browser default (stacked, overlapping list markers)
   instead of an aligned tab row. These rules reproduce the essential layout
   with plain flexbox so tabs stay aligned and usable even without Bootstrap's
   CSS, and are harmless (lower specificity, same visual result) when it does
   load.
   -------------------------------------------------------------------------- */
.nav-tabs,
.nav-pills {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    gap: 6px;
}

.nav-tabs > li,
.nav-pills > li {
    display: block;
    list-style: none;
}

.nav-tabs > li > a,
.nav-pills > li > a {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

@media (max-width: 480px) {
    .nav-tabs, .nav-pills { gap: 8px; }
    .nav-tabs > li, .nav-pills > li { flex: 1 1 auto; }
    .nav-tabs > li > a, .nav-pills > li > a { width: 100%; justify-content: center; }
}

/* -----------------------------------------------------------------------------
   11. Live match pulse
   A subtle pulsing icon on a "LIVE" badge so a match that is actually in
   progress reads as genuinely live, not just a static label. Targets any
   icon inside the badge (fa-circle on the live-match page, fa-signal on the
   homepage widget) rather than one specific icon class. Respects
   prefers-reduced-motion.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .rbsl-live-pulse {
        position: relative;
    }

    .rbsl-live-pulse > i {
        animation: rbslLivePulse 1.6s ease-in-out infinite;
    }
}

@keyframes rbslLivePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* -----------------------------------------------------------------------------
   12. Dark card variant (public site)
   federation-custom.css's ".rbsl-card { background: var(--rbsl-bg-card)
   !important }" is written for the public site's light cards, so it silently
   overrode any card that set its own dark inline background (e.g. the "LIVE
   NOW" scoreboard) - !important always beats an inline style regardless of
   specificity, so the card rendered as a plain light panel instead of the
   dark, high-contrast treatment its content (an orange score on black) was
   designed for. Add this class alongside .rbsl-card, rather than relying on
   an inline background, to opt a specific card into the dark variant.
   -------------------------------------------------------------------------- */
.rbsl-card.rbsl-card--dark {
    background-color: var(--rbsl-surface-dark-panel) !important;
    color: var(--rbsl-text-inverse) !important;
}

.rbsl-card.rbsl-card--dark p,
.rbsl-card.rbsl-card--dark label,
.rbsl-card.rbsl-card--dark li {
    color: var(--rbsl-text-inverse-muted) !important;
}

.rbsl-card.rbsl-card--dark h1,
.rbsl-card.rbsl-card--dark h2,
.rbsl-card.rbsl-card--dark h3,
.rbsl-card.rbsl-card--dark h4,
.rbsl-card.rbsl-card--dark h5,
.rbsl-card.rbsl-card--dark h6 {
    color: var(--rbsl-text-inverse) !important;
}

/* -----------------------------------------------------------------------------
   13. Resilient scoreboard row (live match team-vs-team-vs-score layout)
   Same rationale as the .nav-tabs fallback above: this row depends on
   Bootstrap's .row/.col-xs-* grid (float-based) to lay the two teams and the
   score side by side. If that stylesheet is ever slow, blocked, or fails to
   load, the three columns fall back to the browser default and stack
   vertically - for a live scoreboard, the single most central element on the
   page, that is a serious degradation. This flexbox layout is applied
   alongside the existing Bootstrap classes (harmless when Bootstrap does
   load: a float on a flex item is simply ignored) and guarantees the
   side-by-side layout either way.
   -------------------------------------------------------------------------- */
.rbsl-scoreboard-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    text-align: center;
}

.rbsl-scoreboard-row > .rbsl-scoreboard-team {
    flex: 1 1 160px;
    min-width: 120px;
}

.rbsl-scoreboard-row > .rbsl-scoreboard-score {
    flex: 0 0 auto;
}

@media (max-width: 480px) {
    .rbsl-scoreboard-row { gap: 12px; }
    .rbsl-scoreboard-row > .rbsl-scoreboard-team { flex-basis: 100%; }
}

/* -----------------------------------------------------------------------------
   14. Pagination
   The paginator markup is styled here rather than relying on the Bootstrap CDN,
   for the same reason as the fallbacks above: if that stylesheet is blocked or
   slow the page navigation must still be usable, and "usable" for pagination
   means reachable records. Targets are sized to the 44px minimum touch target
   so the controls are tappable on a phone, and the list wraps instead of
   overflowing the viewport when there are many pages.
   -------------------------------------------------------------------------- */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 30px 0 10px;
}

.pagination .page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    /* Themed, not hardcoded white: on the dark site the paginator was a row of
       white tiles that belonged to no surface on the page. */
    border: 1px solid var(--rbsl-border-color);
    border-radius: 10px;
    background: var(--rbsl-bg-card);
    /* !important to beat ".gdlr-core-text-box-item-content a { color:var(--rbsl-orange-text)
       !important }", which wraps the documents list and would otherwise paint
       the page numbers orange and underlined, so they read as body links
       rather than as the control they are. */
    color: var(--rbsl-text-secondary) !important;
    font-weight: 800;
    font-size: 14px;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pagination .page-item .page-link:hover {
    background: rgba(var(--rbsl-orange-rgb), 0.08);
    border-color: var(--rbsl-orange);
    color: var(--rbsl-orange-text) !important;
}

.pagination .page-item .page-link:focus-visible {
    outline: 3px solid rgba(var(--rbsl-orange-rgb), 0.45);
    outline-offset: 2px;
}

.pagination .page-item.active .page-link {
    background: var(--rbsl-orange);
    border-color: var(--rbsl-orange);
    color: var(--rbsl-text-inverse) !important;
}

.pagination .page-item.disabled .page-link {
    opacity: 0.45;
    cursor: not-allowed;
}

/* The paginator renders a "Showing x to y of z" block alongside the links on
   wider screens; keep it legible and out of the way of the controls. */
.pagination + p,
.rbsl-pagination p {
    font-size: 13px;
    color: var(--rbsl-text-muted);
    text-align: center;
}

@media (max-width: 480px) {
    .pagination { gap: 4px; }
    .pagination .page-item .page-link {
        min-width: 40px;
        min-height: 40px;
        padding: 0 8px;
        font-size: 13px;
    }
}

/* -----------------------------------------------------------------------------
   15. Container fallback
   Every page wraps its content in Bootstrap's .container, but .container is
   only ever defined by the Bootstrap CDN - there is no local copy. When that
   request is slow or blocked the whole site loses its horizontal centring and
   gutters, and content sits flush against the left edge of the viewport.
   These declarations deliberately carry no !important and this file is loaded
   BEFORE the Bootstrap CDN, so whenever Bootstrap does load its own .container
   rules win and nothing here changes; they only take effect as a fallback.
   -------------------------------------------------------------------------- */
.container,
.container-fluid {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.container {
    max-width: 1170px;
}

/* -----------------------------------------------------------------------------
   16. Progressive Web App chrome (install button + update/offline toast)
   -------------------------------------------------------------------------- */
.rbsl-install-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 22px;
    margin-bottom: 18px;
    border: 2px solid var(--rbsl-orange);
    border-radius: 999px;
    background: transparent;
    color: var(--rbsl-orange-text);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.rbsl-install-button:hover {
    background: var(--rbsl-orange);
    color: var(--rbsl-text-inverse);
}

.rbsl-install-button:focus-visible {
    outline: 3px solid rgba(var(--rbsl-orange-rgb), 0.5);
    outline-offset: 3px;
}

/* [hidden] needs defending: the display:inline-flex above would otherwise
   override it and show an install button that cannot do anything. */
.rbsl-install-button[hidden] {
    display: none;
}

.rbsl-pwa-toast {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 520px;
    margin: 0 auto;
    padding: 14px 16px;
    border: 1px solid rgba(var(--rbsl-orange-rgb), 0.45);
    border-radius: 12px;
    background: var(--rbsl-surface-dark);
    color: var(--rbsl-text-inverse);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    box-shadow: 0 12px 30px rgba(var(--rbsl-navy-rgb), 0.35);
}

.rbsl-pwa-toast__text {
    flex: 1 1 auto;
}

.rbsl-pwa-toast__action {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 16px;
    border: none;
    border-radius: 8px;
    background: var(--rbsl-orange);
    color: var(--rbsl-text-inverse);
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.rbsl-pwa-toast__close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--rbsl-text-inverse-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.rbsl-pwa-toast__action:focus-visible,
.rbsl-pwa-toast__close:focus-visible {
    outline: 3px solid rgba(var(--rbsl-orange-rgb), 0.6);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .rbsl-install-button,
    .rbsl-pwa-toast__action { transition: none; }
}

/* -----------------------------------------------------------------------------
   17. Search results page form
   -------------------------------------------------------------------------- */
.rbsl-search-form {
    margin-top: 22px;
}

/* Follows the theme: the hardcoded slate was 1.7:1 against the dark-mode
   background, which is below even the large-text threshold. */
.rbsl-search-form__label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 800;
    color: var(--rbsl-text-secondary);
}

.rbsl-search-form__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.rbsl-search-form__input {
    flex: 1 1 240px;
    min-width: 0;
    height: 48px;
    padding: 0 16px;
    border: 1.5px solid var(--rbsl-border-strong);
    border-radius: 10px;
    background: var(--rbsl-bg-card);
    color: var(--rbsl-text-main);
    font-size: 15px;
    font-weight: 600;
}

.rbsl-search-form__submit {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 0 28px;
    border: none;
    border-radius: 10px;
    background: var(--rbsl-orange);
    color: var(--rbsl-text-inverse);
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
}

.rbsl-search-form__input:focus-visible,
.rbsl-search-form__submit:focus-visible {
    outline: 3px solid rgba(var(--rbsl-orange-rgb), 0.45);
    outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   18. Under-construction notice
   Self-contained so the dialog renders correctly even when the Bootstrap CDN
   is unavailable - a notice the visitor cannot read or dismiss would be worse
   than no notice at all.
   -------------------------------------------------------------------------- */
.rbsl-uc-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(var(--rbsl-navy-deep-rgb), 0.78);
    overflow-y: auto;
}

/* The element is revealed by script; without this the display:flex above would
   override [hidden] and the dialog would show for everyone, every page. */
.rbsl-uc-backdrop[hidden] {
    display: none;
}

.rbsl-uc-modal {
    position: relative;
    width: 100%;
    max-width: 470px;
    margin: auto;
    padding: 38px 32px 32px;
    border: 1px solid rgba(var(--rbsl-orange-rgb), 0.45);
    border-top: 5px solid var(--rbsl-orange);
    border-radius: 16px;
    background: var(--rbsl-surface-dark);
    box-shadow: 0 24px 60px rgba(var(--rbsl-black-rgb), 0.5);
    text-align: center;
    color: var(--rbsl-text-inverse);
}

.rbsl-uc-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--rbsl-text-inverse-muted);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.rbsl-uc-close:hover {
    background: rgba(var(--rbsl-white-rgb), 0.08);
    color: var(--rbsl-text-inverse);
}

/* Framing comes from .rbsl-brand-mark; only the size is local to the notice.
   It used to reach for --rbsl-bg-card as the field behind the crest, which was
   never visible: the old icon was an opaque square that covered the whole
   circle, so the ring was always white whatever that token resolved to. The
   token now says white, and says so on purpose. */
.rbsl-uc-badge img {
    width: 74px;
    height: 74px;
}

.rbsl-uc-eyebrow {
    margin: 14px 0 6px;
    color: var(--rbsl-orange-text);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* federation-custom.css paints every heading with
   "h1, h2, ... { color: var(--rbsl-text-main) !important }" for the light site.
   On this dark panel that resolved to #0f172a on a #0f172a background - the
   title was rendering, but literally invisible - and it forced the size to
   48px as well. The !important here is only to beat that !important; on
   specificity alone this single class already outranks an element selector. */
.rbsl-uc-title {
    margin: 0 0 12px;
    color: var(--rbsl-text-inverse) !important;
    font-size: 24px !important;
    font-weight: 900;
    line-height: 1.3 !important;
}

.rbsl-uc-message {
    margin: 0 0 24px;
    color: var(--rbsl-text-inverse-muted);
    font-size: 14.5px;
    line-height: 1.7;
}

.rbsl-uc-cta {
    display: inline-block;
    width: 100%;
    min-height: 48px;
    padding: 0 26px;
    border: none;
    border-radius: 10px;
    background: var(--rbsl-orange);
    color: var(--rbsl-text-inverse);
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
}

.rbsl-uc-cta:hover {
    background: var(--rbsl-orange-hover);
}

.rbsl-uc-cta:focus-visible,
.rbsl-uc-close:focus-visible {
    outline: 3px solid rgba(var(--rbsl-white-rgb), 0.75);
    outline-offset: 3px;
}

@media (max-width: 420px) {
    .rbsl-uc-modal { padding: 32px 20px 24px; }
    .rbsl-uc-title { font-size: 20px; }
    .rbsl-uc-message { font-size: 14px; }
}

/* -----------------------------------------------------------------------------
   19. Match scoreboard (shared by the homepage widget, live-match cards and the
   match detail page - see resources/views/partials/scoreboard.blade.php)

   Both sides are laid out identically (crest above name, centred) rather than
   mirrored. The mirrored arrangement reads fine on a wide screen but, once the
   row runs out of width on a phone, team A wraps as crest-then-name while team
   B wraps as name-then-crest, producing a zigzag down the page.

   The three columns stay on one line down to the narrowest phone by shrinking
   the crest and type instead of stacking, which is how a scoreboard is meant
   to be read.
   -------------------------------------------------------------------------- */
/* A grid, not three flex columns.
 *
 * As flex columns each side was centred within its own height, so the moment
 * one club name wrapped to three lines and the other stayed on one, the two
 * crests sat at different heights and the names no longer shared a baseline -
 * at 320px "Colombo Rollers Sports Club" pushed its crest a full line above
 * Myanmar's. Two explicit rows fix that by construction: every crest is in row
 * 1 and every name in row 2, whatever either name does, and the score spans
 * both so it stays centred on the pair.
 *
 * The team wrappers stay in the markup for reading order ("Sri Lanka ... 15-2
 * ... Myanmar") and are flattened with display: contents so their children
 * become the grid items. They carry no semantics, so removing the box from the
 * tree costs nothing. */
.rbsl-score {
    display: grid;
    /* minmax(0, 1fr) rather than 1fr: a grid track is min-content sized by
       default, so a plain 1fr would let a long club name widen its own column
       and squeeze the score out between them. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: center;
    column-gap: 14px;
    row-gap: 10px;
    width: 100%;
    /* Without a cap the two sides sit at the far edges of a wide screen and the
       scoreboard stops reading as one unit. */
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.rbsl-score__team {
    display: contents;
}

.rbsl-score__team--a > .rbsl-avatar { grid-column: 1; grid-row: 1; }
.rbsl-score__team--a > .rbsl-score__name { grid-column: 1; grid-row: 2; }
.rbsl-score__team--b > .rbsl-avatar { grid-column: 3; grid-row: 1; }
.rbsl-score__team--b > .rbsl-score__name { grid-column: 3; grid-row: 2; }

.rbsl-score__name {
    /* Top of the name row, not centred in it: the row is as tall as the longer
       name, so centring left a one-line name floating at its middle while the
       four-line one started at the top. */
    align-self: start;
    /* min-width: 0 belongs on the grid item itself: a grid track is min-content
       sized by default, so without it a long unbroken name widens its column
       and squeezes the score out. */
    min-width: 0;
    max-width: 100%;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0.3px;
    overflow-wrap: anywhere;   /* "Colombo Rollers Club" must not push the row wide */
    text-wrap: balance;
}

.rbsl-score__value {
    display: flex;
    /* Spans the crest row and the name row, so it is centred on the pair
       rather than on whichever side happens to be taller. */
    grid-column: 2;
    grid-row: 1 / span 2;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border: 2px solid var(--rbsl-orange);
    border-radius: 14px;
    background: rgba(var(--rbsl-black-rgb), 0.55);
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.rbsl-score__link {
    display: flex;
    align-items: baseline;
    gap: 6px;
    text-decoration: none;
}

/* The homepage hero is a .dark-section, whose "span { color:var(--rbsl-text-inverse-muted) !important }"
   rule turned the score itself a muted grey - the one number on the page that
   has to stand out. Rather than escalate, these three classes were added to
   that rule's existing :not() exclusion list in federation-custom.css, which is
   what the list is there for. */
.rbsl-score__num {
    color: var(--rbsl-orange);
    font-size: 38px;
    font-weight: 900;
}

.rbsl-score__sep {
    color: var(--rbsl-text-inverse);
    font-size: 24px;
    font-weight: 700;
    opacity: 0.85;
}

/* Sitting on the dark hero photograph, so the type is always light here
   regardless of the visitor's theme. */
.rbsl-score--hero .rbsl-score__name {
    color: var(--rbsl-text-inverse);
}

/* In a card or page panel, follow the active theme. */
.rbsl-score--panel .rbsl-score__name {
    color: var(--rbsl-text-main);
}

.rbsl-score--panel .rbsl-score__value {
    background: var(--rbsl-navy-header);
}

.rbsl-score--panel .rbsl-score__sep {
    color: var(--rbsl-text-inverse);
}

@media (max-width: 560px) {
    .rbsl-score { gap: 10px; }
    .rbsl-score__value { padding: 9px 12px; }
    .rbsl-score__num { font-size: 29px; }
    .rbsl-score__sep { font-size: 20px; }
    .rbsl-score__name { font-size: 13.5px; }
}

@media (max-width: 380px) {
    .rbsl-score { gap: 7px; }
    .rbsl-score__value { padding: 8px 9px; border-radius: 11px; }
    .rbsl-score__num { font-size: 25px; }
    .rbsl-score__sep { font-size: 17px; }
    .rbsl-score__name { font-size: 12.5px; letter-spacing: 0; }
    .rbsl-score__team { gap: 7px; }
}

/* The avatar partial writes its diameter as an inline width/height, which an
   ordinary rule cannot reach - hence !important here. Without it the crests
   keep their desktop size on a phone and push the score box off the screen. */
@media (max-width: 560px) {
    .rbsl-score__team .rbsl-avatar {
        width: 58px !important;
        height: 58px !important;
    }
    .rbsl-score__team .rbsl-avatar .rbsl-avatar__initials { font-size: 20px !important; }
}

@media (max-width: 380px) {
    .rbsl-score__team .rbsl-avatar {
        width: 48px !important;
        height: 48px !important;
    }
    .rbsl-score__team .rbsl-avatar .rbsl-avatar__initials { font-size: 17px !important; }
}

/* -----------------------------------------------------------------------------
   20. Theme control + mobile header sizing
   -------------------------------------------------------------------------- */

/* Icon-only in the header bars. Sized to the 44px minimum touch target, since
   dropping the word left a control that was otherwise too small to tap. */
.theme-toggle-btn:not(.rbsl-theme-toggle--labelled) {
    width: 42px;
    height: 42px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
}

.theme-toggle-btn:not(.rbsl-theme-toggle--labelled) i {
    font-size: 16px;
    line-height: 1;
}

/* Inside the mobile slide-out menu the control sits among worded rows, so it
   is labelled and laid out to match them rather than as a floating pill. */
.rbsl-menu-theme-item {
    padding: 0;
}

.rbsl-theme-toggle--labelled {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 12px 20px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-align: left;
}

.rbsl-theme-toggle--labelled i {
    width: 18px;
    color: var(--rbsl-orange);
    text-align: center;
}

.rbsl-theme-toggle--labelled:hover {
    background: rgba(var(--rbsl-orange-rgb), 0.1);
    color: inherit;
}

/* The federation crest.
 *
 * The source artwork was a JPEG: a round badge printed on an opaque white
 * square. JPEG has no alpha, so those four corners were real white pixels, and
 * every dark surface the mark sits on - the header, the footer, the admin
 * sidebar - rendered it as a white tile with a circle inside rather than as the
 * circle itself. upload/rbfsl-crest.png is the same artwork masked to its own
 * outline and cropped to it, so the corners are transparent and whatever dark
 * surface is behind shows through. Nothing here paints that dark colour: the
 * header is already --rbsl-surface-dark, the footer and the admin chrome their
 * own, and the mark now simply lets each one through. That is also why it is
 * the same file in light mode, where the page surface shows instead.
 *
 * The round shape is enforced here rather than trusted to the artwork, because
 * the same slot is a fallback for club and sponsor logos, which are square. */
.rbsl-brand-mark {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 50%;
    /* The ring the crest is printed on, then the brand ring around it - the
       same framing the under-construction notice uses. border-box so a slot
       that asks for 46px gets 46px, chrome included, rather than 56px. */
    box-sizing: border-box;
    padding: 3px;
    background: var(--rbsl-brand-mark-field);
    border: 3px solid var(--rbsl-orange);
}

/* Below about 60px the two rings start eating the mark itself, so they thin
   out with it rather than keeping a fixed weight. */
@media (max-width: 991px) {
    .bigslam-mobile-header .rbsl-brand-mark {
        padding: 2px;
        border-width: 2px;
    }
}

/* The mobile header crest used to declare itself 300x109, the ratio of the old
   wide lockup. With the theme's "width: auto" that rendered a ~135px block that
   dominated the bar on a phone. The markup now carries the real square ratio,
   and this cap keeps the crest legible while the bar stays compact. */
.bigslam-mobile-header .bigslam-logo-inner img {
    max-height: 46px;
    width: auto;
}

@media (max-width: 380px) {
    .bigslam-mobile-header .bigslam-logo-inner img { max-height: 40px; }
}

/* -----------------------------------------------------------------------------
   21. Tables sitting on a dark panel
   The theme stripes every table with "table tr:nth-child(2n+1) {
   background-color: #f9f9f9 }". Inside a dark panel that painted alternate
   rows near-white underneath white text, so half the club standings on the
   homepage were invisible - the row's own stripe won because the cells only
   set their own background to transparent, not the row's.
   -------------------------------------------------------------------------- */
.rbsl-table-on-dark tr,
.rbsl-table-on-dark tbody tr:nth-child(2n+1),
.rbsl-table-on-dark thead tr {
    background-color: transparent !important;
}

/* bigslam-style-custom.css separates rows with a 3px bottom border fixed to
   white. On the light site that is an invisible gap in the white card; on a
   dark card it became a bright band across every row. Pointing it at the
   surface behind it keeps it a gap in both themes - and on the always-dark
   panels, at that panel's own surface. */
.sp-data-table tr,
.table tr,
table tr {
    border-bottom-color: var(--rbsl-bg-card) !important;
}

.rbsl-card--dark tr,
.rbsl-table-on-dark tr {
    border-bottom-color: var(--rbsl-surface-dark-panel) !important;
}

/* -----------------------------------------------------------------------------
   22. Filter chips (document category filter)
   Deliberately not .rbsl-badge: that rule sets background and colour with
   !important, which overrode the active/inactive styling the chips carried
   inline, so every chip looked the same and the applied filter was
   indistinguishable from the rest. Colours follow the theme tokens and clear
   4.5:1 in both themes.
   -------------------------------------------------------------------------- */
/* Qualified with :not(.is-active) so the selector carries two classes. The
   theme's ".gdlr-core-text-box-item-content a { color:var(--rbsl-orange-text) !important }"
   that wraps these chips is one class plus one element, which would otherwise
   outrank a bare single-class rule whatever the file order. */
.rbsl-filter-chip:not(.is-active) {
    color: var(--rbsl-text-secondary) !important;
}

.rbsl-filter-chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin: 0 6px 8px 0;
    padding: 8px 16px;
    border: 1px solid var(--rbsl-border-color);
    border-radius: 20px;
    background: var(--rbsl-bg-alt);
    /* The chips sit inside .gdlr-core-text-box-item-content, whose
       "a { color: var(--rbsl-orange-text) !important }" would otherwise paint every chip
       orange - 2.8:1 on the light chip, and indistinguishable between the
       active and inactive states. */
    color: var(--rbsl-text-secondary) !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.rbsl-filter-chip:hover,
.rbsl-filter-chip:focus {
    border-color: var(--rbsl-orange);
    color: var(--rbsl-orange-dark) !important;
    text-decoration: none;
}

.rbsl-filter-chip:focus-visible {
    outline: 3px solid rgba(var(--rbsl-orange-rgb), 0.45);
    outline-offset: 2px;
}

.rbsl-filter-chip.is-active {
    border-color: var(--rbsl-navy-header);
    background: var(--rbsl-navy-header);
    color: var(--rbsl-text-inverse) !important;
}

[data-theme="dark"] .rbsl-filter-chip.is-active {
    border-color: var(--rbsl-orange);
    background: var(--rbsl-orange);
    color: var(--rbsl-text-inverse) !important;
}

@media (prefers-reduced-motion: reduce) {
    .rbsl-filter-chip { transition: none; }
}

/* -----------------------------------------------------------------------------
   23. Crest/flag avatars (object-fit: contain)
   A flag is wide - Sri Lanka's is 2:1 - so cropping it square to fill a circle
   throws away half the artwork: the green and orange bands, the bo leaves and
   the gold border all disappeared, leaving a maroon disc. These show the whole
   image inside the circle instead, on a light disc so the letterboxed area
   above and below reads as part of the badge rather than as a gap.
   -------------------------------------------------------------------------- */
.rbsl-avatar--contain .rbsl-avatar__img {
    object-fit: contain;
    /* A circle is at its widest across the centre, so a horizontally centred
       band can run nearly edge to edge without the border-radius clipping it.
       Just enough inset to keep the artwork off the rim. */
    padding: 4%;
    border-radius: 50%;
    background: var(--rbsl-bg-card);
}

/* The initials sit underneath the image; with a transparent logo they would
   otherwise show through the letterboxed area. */
.rbsl-avatar--contain .rbsl-avatar__initials {
    background: var(--rbsl-bg-card);
    color: var(--rbsl-navy-header);
    text-shadow: none;
}

/* -----------------------------------------------------------------------------
   24. Buttons wrap their label
   Bootstrap 3 ships ".btn { white-space: nowrap }". Any button whose label is
   wider than the screen therefore spills out of its own box instead of
   wrapping: the membership button ("Proceed to PayHere Online Payment (LKR
   1,500.00)") ran 320px past its edge on a phone and the amount was cut off
   entirely, and "View Fixtures & Standings" overflowed by 51px. Bootstrap 4
   changed this default for the same reason.
   -------------------------------------------------------------------------- */
/* !important because the Bootstrap CDN is loaded AFTER this stylesheet (see
   layouts/head.blade.php), so its own ".btn { white-space: nowrap }" would
   otherwise win on source order at equal specificity. */
.btn,
.squad-btn,
.gdlr-core-button,
input[type="submit"],
button[type="submit"] {
    white-space: normal !important;
    /* break-word, not anywhere: "anywhere" also shrinks the element's
       min-content width to a single character, which let a short label like
       "Search" be laid out one letter per line inside a narrow input group. */
    overflow-wrap: break-word;
}

/* A full-width button is the one most likely to carry a long label, so give it
   room to breathe once the text runs to two lines. */
.btn-block {
    display: block;
    width: 100%;
    line-height: 1.35;
}

/* A short action label in a table cell is the exception: the column is sized
   from the cell's min-content width, so letting "Preview" wrap told the table
   it could live in 45px and the label came out as "Previe / w". These labels
   are a word or two, so they keep one line and the column widens to fit. */
.table td .btn,
.sp-data-table td .btn,
table td .btn,
.rbsl-cell-actions .btn {
    white-space: nowrap !important;
}

/* -----------------------------------------------------------------------------
   25. Wide tables stack into cards on a phone
   The documents table is six columns; the rankings and roster tables are
   wider still. Inside a horizontal scroller on a 360px screen that left most
   of each row off-screen in both directions - the category chip clipped on
   one side, the download button on the other - and nothing on screen said the
   row continued. Below the tablet breakpoint each row becomes a card and each
   cell carries its column name, so the whole row is readable without
   sideways scrolling.

   The data-label values are filled in by js/rbsl-tables.js from each table's
   own <th>, so this works for any table on the site, including ones added
   later. With JavaScript unavailable the markup is untouched and the tables
   simply scroll as before.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .rbsl-table-stack,
    .rbsl-table-stack tbody,
    .rbsl-table-stack tr,
    .rbsl-table-stack td {
        display: block;
        width: auto !important;
    }

    /* Headers are redundant once every cell is labelled, but they must stay in
       the accessibility tree for screen readers. */
    .rbsl-table-stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    .rbsl-table-stack {
        border: 0 !important;
    }

    /* !important on the borders: bigslam-style-custom.css pins every row's
       border-color to white with !important, so this card outline never
       actually applied - invisible against a white page, a white box around
       every stacked card once the page went dark. */
    .rbsl-table-stack tr {
        margin-bottom: 14px;
        padding: 4px 2px;
        border: 1px solid var(--rbsl-border-color) !important;
        border-left: 3px solid var(--rbsl-orange) !important;
        border-bottom-color: var(--rbsl-border-color) !important;
        border-radius: 12px;
        background: var(--rbsl-bg-card);
        overflow: hidden;
    }

    /* Block rather than flex: a cell can hold anything (a title plus a
       description, a pair of buttons, a badge), and as flex items those
       children would line up in a row and run off the edge instead of
       wrapping. Absolutely positioning the label keeps the value free to
       wrap as ordinary content. */
    .rbsl-table-stack td {
        position: relative;
        padding: 9px 14px 9px 42% !important;
        border: 0 !important;
        border-bottom: 1px solid var(--rbsl-hairline) !important;
        text-align: right !important;
        overflow-wrap: anywhere;
        min-height: 40px;
    }

    .rbsl-table-stack td:last-child {
        border-bottom: 0 !important;
    }

    /* The theme pins every cell in a .sp-table-wrapper to white-space:nowrap,
       which is what made these tables a thousand pixels wide in the first
       place. Stacked rows have to be free to wrap. */
    .rbsl-table-stack td,
    .rbsl-table-stack td * {
        white-space: normal !important;
    }

    .rbsl-table-stack td::before {
        content: attr(data-label);
        position: absolute;
        top: 11px;
        left: 14px;
        width: 36%;
        color: var(--rbsl-text-muted);
        font-size: 11.5px;
        font-weight: 800;
        letter-spacing: 0.4px;
        line-height: 1.35;
        text-transform: uppercase;
        text-align: left;
        overflow-wrap: anywhere;
    }

    /* A cell with no label uses the full width. */
    .rbsl-table-stack td[data-label=""] {
        padding-left: 14px !important;
        text-align: left !important;
    }

    .rbsl-table-stack td[data-label=""]::before {
        content: none;
    }

    /* Buttons need the whole card width, with their label above rather than
       beside them - in the narrow value column they wrapped mid-word. */
    .rbsl-table-stack td.rbsl-cell-actions {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 11px 14px !important;
        text-align: left !important;
    }

    .rbsl-table-stack td.rbsl-cell-actions::before {
        position: static;
        width: 100%;
        margin-bottom: 2px;
    }

    .rbsl-table-stack td.rbsl-cell-actions .btn,
    .rbsl-table-stack td.rbsl-cell-actions button {
        flex: 0 1 auto;
        overflow-wrap: normal;
        word-break: keep-all;
    }

    /* Forms wrapping a single action button should not force a line break. */
    .rbsl-table-stack td.rbsl-cell-actions form {
        display: inline-block;
        margin: 0;
    }

    /* The wrapper no longer needs to scroll once the rows are stacked. */
    .rbsl-table-stack-wrap {
        overflow-x: visible !important;
    }
}

/* Category filter row: wraps onto as many lines as it needs. */
.rbsl-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 25px;
}

/* An image that failed to load is replaced with the federation crest; contain
   and pad it so it reads as a deliberate placeholder rather than a stretched
   photo, and give it a backdrop so it never sits on bare white. */
.rbsl-img-fallback {
    object-fit: contain !important;
    padding: 14% !important;
    background: var(--rbsl-gradient-dark-deep) !important;
    opacity: 0.85;
}

/* -----------------------------------------------------------------------------
   26. Spacing utilities
   The views lean on these classes 75 times to separate stacked cards, but
   nothing ever defined them - they came from a theme this site does not load.
   The result was that every card in a stacked column sat flush against the
   next one with no gap at all on a phone, across the player, club, tournament,
   media and search listings.
   -------------------------------------------------------------------------- */
.margin-bottom-10 { margin-bottom: 10px; }
.margin-bottom-20 { margin-bottom: 20px; }
.margin-bottom-25 { margin-bottom: 25px; }
.margin-bottom-30 { margin-bottom: 30px; }
.margin-bottom-40 { margin-bottom: 40px; }
.margin-top-20 { margin-top: 20px; }
.margin-top-25 { margin-top: 25px; }

/* Columns in a card grid need breathing room once they stack, whether or not
   the view remembered a spacing class. */
@media (max-width: 991px) {
    [class*="col-md-"] > .rbsl-card,
    [class*="col-sm-"] > .rbsl-card,
    [class*="col-md-"] > a > .rbsl-card {
        margin-bottom: 20px;
    }
}

/* -----------------------------------------------------------------------------
   27. Accent text on surfaces that stay dark in both themes
   The accent and status text tokens resolve to their darker variants on light
   surfaces so body copy clears 4.5:1. These containers are dark whichever theme is active - the
   hero sits on a photograph, the footer and the admin panel are always dark -
   so inside them the bright accent is both correct and higher contrast. Custom
   properties inherit, so every descendant picks this up without the markup
   having to know which surface it is on.
   -------------------------------------------------------------------------- */
.dark-section,
.upcoming-section,
.hero-banner-container,
.event-card,
.rbsl-card--dark,
.rbsl-score--hero,
.admin-content,
.admin-sidebar,
.bigslam-footer-wrapper,
.bigslam-copyright-wrapper,
.bigslam-top-bar,
.bigslam-page-title-wrap,
.rbsl-table-on-dark {
    --rbsl-orange-text: #ff8c3a;
    --rbsl-danger-text: #f87171;
    --rbsl-danger-strong-text: #fca5a5;
    --rbsl-success-text: #4ade80;
    --rbsl-warning-text: #fbbf24;
    --rbsl-info-text: #93c5fd;
    /* The badge tint has to come along with the badge text: overriding only
       the text left #ffb380 sitting on the light #fff7ed wash at 1.65:1. */
    --rbsl-badge-text: #ffb380;
    --rbsl-badge-bg: #3a1d08;
    --rbsl-badge-contrast-bg: #475569;
    --rbsl-orange-light: #3a1d08;
    --rbsl-danger-bg: #3b1518;
    --rbsl-danger-border: #7f1d1d;
    --rbsl-success-bg: #10281c;
    --rbsl-success-border: #166534;
    --rbsl-warning-bg: #2e2206;
    --rbsl-warning-border: #854d0e;
    --rbsl-info-bg: #15233b;
    --rbsl-info-border: #1e40af;
    --rbsl-border-strong: #475569;
}