/* ============================================================
   ARENA — CMSA public front-end skin (Arena Night direction)
   Loads AFTER evently/main.css, site main.css and cmsa-modern.css
   and overrides them. Public layout only — admin/member areas
   (EliteAdmin) never load this file.

   Themes: light "Daylight Arena" is the :root default; dark
   "Arena Night" activates on html[data-theme="dark"]. The layout
   boot script sets data-theme + data-bs-theme before first paint.

   Text rule: exactly two text tones per theme — --arena-ink and
   --arena-muted, both WCAG AA. Hierarchy below that is expressed
   with size / weight / uppercase / letter-spacing, never a third
   grey. Functional colors (accent, danger) sit outside the rule.
   ============================================================ */

/* ---------- 1. Tokens ---------- */

:root {
    /* Daylight Arena (light) */
    --arena-bg: #f4efe6;
    --arena-panel: #fdfaf4;
    --arena-panel-2: #ebe4d6;
    --arena-ink: #241d13;
    --arena-muted: #6d6355;
    --arena-line: #ddd3c1;
    --arena-accent: #f87500;          /* fills, glows, washes */
    --arena-accent-text: #a54a00;     /* orange as TEXT on light surfaces — AA even on panel-2 */
    --arena-accent-ink: #14110d;      /* text on accent fills */
    --arena-accent-soft: rgba(248, 117, 0, .12);
    --arena-danger: #b93a3a;
    --arena-danger-soft: rgba(185, 58, 58, .12);
    --arena-success: #2e6e4e;
    --arena-success-soft: rgba(46, 110, 78, .12);
    --arena-row-line: #e7dfd0;
    --arena-row-hover: #f6f1e7;
    --arena-glow: 0 0 14px -4px rgba(248, 117, 0, .55);
    color-scheme: light;
}

html[data-theme="dark"] {
    /* Arena Night (dark) — locked probe palette */
    --arena-bg: #14110d;
    --arena-panel: #1d1913;
    --arena-panel-2: #241f17;
    --arena-ink: #f3efe8;
    --arena-muted: #9b9184;
    --arena-line: #332c22;
    --arena-accent: #f87500;
    --arena-accent-text: #f87500;     /* 6:1 on the dark grounds */
    --arena-accent-ink: #14110d;
    --arena-accent-soft: rgba(248, 117, 0, .14);
    --arena-danger: #e05252;
    --arena-danger-soft: rgba(224, 82, 82, .14);
    --arena-success: #5eb98c;
    --arena-success-soft: rgba(94, 185, 140, .14);
    --arena-row-line: #262019;
    --arena-row-hover: #221d15;
    --arena-glow: 0 0 14px -4px rgba(248, 117, 0, .6);
    color-scheme: dark;
}

/* Chrome that stays Arena Night dark in BOTH themes (footer, page-title band) */
.arena-chrome-dark,
.dark-background {
    --background-color: #14110d;
    --default-color: #f3efe8;
    --heading-color: #f3efe8;
    --surface-color: #1d1913;
    --contrast-color: #14110d;
}

/* ---------- 2. Evently variable remap ---------- */

:root {
    --default-font: "Inter", system-ui, -apple-system, sans-serif;
    --heading-font: "Barlow Condensed", "Inter", sans-serif;
    --nav-font: "Barlow Condensed", "Inter", sans-serif;

    --background-color: var(--arena-bg);
    --default-color: var(--arena-ink);
    --heading-color: var(--arena-ink);
    --accent-color: var(--arena-accent);
    --surface-color: var(--arena-panel);
    --contrast-color: var(--arena-accent-ink);

    --nav-color: var(--arena-ink);
    --nav-hover-color: var(--arena-accent-text);
    --nav-mobile-background-color: var(--arena-panel);
    --nav-dropdown-background-color: var(--arena-panel);
    --nav-dropdown-color: var(--arena-ink);
    --nav-dropdown-hover-color: var(--arena-accent-text);
}

.light-background {
    --background-color: var(--arena-bg);
    --surface-color: var(--arena-panel);
}

/* ---------- 3. Bootstrap remap ---------- */

:root,
[data-bs-theme] {
    --bs-body-bg: var(--arena-bg);
    --bs-body-color: var(--arena-ink);
    --bs-emphasis-color: var(--arena-ink);
    --bs-secondary-color: var(--arena-muted);
    --bs-tertiary-color: var(--arena-muted);
    --bs-secondary-bg: var(--arena-panel-2);
    --bs-tertiary-bg: var(--arena-panel-2);
    --bs-border-color: var(--arena-line);
    --bs-link-color: var(--arena-accent-text);
    --bs-link-hover-color: var(--arena-accent-text);
    --bs-heading-color: var(--arena-ink);
}

body {
    font-family: var(--default-font);
    background-color: var(--arena-bg);
    color: var(--arena-ink);
}

/* Display type: Barlow Condensed, uppercase, tight tracking */
h1, h2, h3, h4, h5, h6,
.disp {
    font-family: var(--heading-font);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--arena-ink);
}

a { color: var(--arena-accent-text); }
a:hover { color: var(--arena-accent-text); }

.text-muted, .text-secondary { color: var(--arena-muted) !important; }
.text-primary { color: var(--arena-accent-text) !important; }
.text-danger { color: var(--arena-danger) !important; }
.text-success { color: var(--arena-success) !important; }
.bg-light { background-color: var(--arena-panel-2) !important; }
.bg-white { background-color: var(--arena-panel) !important; }
.border { border-color: var(--arena-line) !important; }
hr { border-color: var(--arena-line); opacity: 1; }

::selection { background: var(--arena-accent-soft); }

:focus-visible {
    outline: 2px solid var(--arena-accent);
    outline-offset: 2px;
}

/* ---------- 4. Header / nav chrome ---------- */

/* Gradual-rollout banner — fixed strip above the fixed header; the
   has-preview-banner body class pushes the header and its clearances
   down by the banner height (38px). Always Arena Night dark. */
.preview-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 38px;
    display: flex;
    align-items: center;
    background: #14110d;
    color: #f3efe8;
    border-bottom: 1px solid #332c22;
    font-size: .82rem;
}

.preview-banner .container {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

.preview-banner .tag {
    background: #f87500;
    color: #14110d;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .66rem;
    padding: .1rem .5rem;
    border-radius: 3px;
    flex-shrink: 0;
}

.preview-banner .msg {
    color: #9b9184;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview-banner a {
    margin-left: auto;
    color: #f87500;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

.preview-banner a:hover { color: #f3efe8; }

.has-preview-banner .header { top: 38px; }
.has-preview-banner .page-title { padding-top: 142px; }
.has-preview-banner .arena-hero.hero-bleed { padding-top: 142px; }

@media (max-width: 575px) {
    .preview-banner .msg { display: none; }
}

/* The site logo is white line art (owners require this exact file). In the
   light theme it sits on a small Arena Night plate so it stays visible;
   in dark the plate matches the header and disappears. */
.header .logo {
    background: #14110d;
    border-radius: 3px;
    padding: 5px 10px;
}

html[data-theme="dark"] .header .logo {
    background: transparent;
    padding: 5px 0;
}

.header {
    background: color-mix(in srgb, var(--arena-bg) 92%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--arena-line);
    box-shadow: none;
}

.scrolled .header {
    background: color-mix(in srgb, var(--arena-bg) 96%, transparent);
    box-shadow: none;
}

.navmenu a,
.navmenu a:focus {
    font-family: var(--nav-font);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 15px;
    font-weight: 500;
    color: var(--arena-muted);
}

.navmenu a:hover,
.navmenu .active,
.navmenu .active:focus {
    color: var(--arena-ink);
}

.navmenu .dropdown ul {
    background: var(--arena-panel);
    border: 1px solid var(--arena-line);
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.navmenu .dropdown ul a { color: var(--arena-ink); }
.navmenu .dropdown ul a:hover,
.navmenu .dropdown ul .active { color: var(--arena-accent-text); }

.mobile-nav-toggle { color: var(--arena-ink); }

/* Header buttons (Join Now / Login / Logout) */
.header .btn-group { gap: .5rem; }

.header .btn.btn-primary,
.header .btn-getstarted,
.header .btn-getstarted:focus {
    background: var(--arena-accent);
    color: var(--arena-accent-ink);
    border: 1px solid var(--arena-accent);
    border-radius: 4px;
    font-family: var(--heading-font);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 8px 20px;
}

.header .btn.btn-primary:hover,
.header .btn-getstarted:hover { filter: brightness(1.1); background: var(--arena-accent); color: var(--arena-accent-ink); }

/* .btn-group variant included: site main.css targets
   .header .btn-group .btn.btn-outline-primary with color: var(--contrast-color)
   (now accent-ink), which made the Login text invisible on the dark header —
   this higher-specificity block wins in both themes. */
.header .btn.btn-outline-primary,
.header .btn-group .btn.btn-outline-primary {
    background: transparent;
    color: var(--arena-ink);
    border: 1px solid var(--arena-line);
    border-radius: 4px;
    font-family: var(--heading-font);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 8px 20px;
}

.header .btn.btn-outline-primary:hover,
.header .btn-group .btn.btn-outline-primary:hover {
    border-color: var(--arena-accent);
    color: var(--arena-accent-text);
    background: transparent;
}

/* Theme toggle */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--arena-line);
    border-radius: 4px;
    background: transparent;
    color: var(--arena-ink);
    cursor: pointer;
    font-size: 15px;
    transition: border-color .15s, color .15s;
}

.theme-toggle:hover { border-color: var(--arena-accent); color: var(--arena-accent-text); }
.theme-toggle .theme-icon-dark { display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon-dark { display: inline; }
html[data-theme="dark"] .theme-toggle .theme-icon-light { display: none; }

/* ---------- 5. Page-title band (always Arena Night dark) ---------- */

.page-title {
    min-height: 0;
    padding: 104px 0 0;
    background:
        radial-gradient(60% 120% at 50% 0%, rgba(248, 117, 0, .16), transparent 70%),
        linear-gradient(180deg, #191510, #14110d);
    border-bottom: 1px solid #332c22;
}

.page-title::before { display: none; }

/* ---------- 6. Footer (always Arena Night dark) ---------- */

.footer {
    --background-color: #14110d;
    --default-color: #9b9184;
    --heading-color: #f3efe8;
    --surface-color: #1d1913;
    --accent-color: #f87500;
    --contrast-color: #14110d;
    background: #14110d;
    color: #9b9184;
    border-top: 1px solid #332c22;
}

/* Motto line — ember orange in a sharper brush script (Yellowtail replaces
   the old Kaushan Script; loaded in the public layout's Google Fonts link) */
#footer .header-logo-motto {
    font-family: 'Yellowtail', cursive;
    color: #f87500;
}

#footer .header-logo-motto::before,
#footer .header-logo-motto::after {
    background: rgba(248, 117, 0, .35);
}

.footer h4 { color: #f3efe8; }
.footer a { color: #9b9184; }
.footer a:hover { color: #f3efe8; }
.footer .social-links a { border-color: #332c22; color: #9b9184; }
.footer .social-links a:hover { border-color: #f87500; color: #f87500; }

.scroll-top {
    background: var(--arena-accent);
    color: var(--arena-accent-ink);
    border-radius: 4px;
}

.scroll-top:hover { filter: brightness(1.1); background: var(--arena-accent); color: var(--arena-accent-ink); }

/* ---------- 7. Buttons (site-wide) ---------- */

.btn { border-radius: 4px; }

.btn-primary, .btn.btn-primary {
    --bs-btn-bg: var(--arena-accent);
    --bs-btn-color: var(--arena-accent-ink);
    --bs-btn-border-color: var(--arena-accent);
    --bs-btn-hover-bg: var(--arena-accent);
    --bs-btn-hover-color: var(--arena-accent-ink);
    --bs-btn-hover-border-color: var(--arena-accent);
    --bs-btn-active-bg: var(--arena-accent);
    --bs-btn-active-color: var(--arena-accent-ink);
    --bs-btn-active-border-color: var(--arena-accent);
    --bs-btn-disabled-bg: var(--arena-panel-2);
    --bs-btn-disabled-color: var(--arena-muted);
    --bs-btn-disabled-border-color: var(--arena-line);
    background: var(--arena-accent);
    border-color: var(--arena-accent);
    color: var(--arena-accent-ink);
}

.btn-primary:hover, .btn.btn-primary:hover,
.btn-primary:focus, .btn.btn-primary:focus {
    filter: brightness(1.08);
    background: var(--arena-accent);
    border-color: var(--arena-accent);
    color: var(--arena-accent-ink);
}

.btn-outline-primary, .btn.btn-outline-primary {
    --bs-btn-color: var(--arena-ink);
    --bs-btn-border-color: var(--arena-line);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-color: var(--arena-accent-text);
    --bs-btn-hover-border-color: var(--arena-accent);
    --bs-btn-active-bg: var(--arena-accent-soft);
    --bs-btn-active-color: var(--arena-accent-text);
    --bs-btn-active-border-color: var(--arena-accent);
    color: var(--arena-ink);
    border-color: var(--arena-line);
    background: transparent;
}

.btn-outline-primary:hover, .btn.btn-outline-primary:hover {
    color: var(--arena-accent-text);
    border-color: var(--arena-accent);
    background: transparent;
    filter: none;
}

.btn-secondary, .btn-outline-secondary {
    --bs-btn-bg: var(--arena-panel-2);
    --bs-btn-color: var(--arena-ink);
    --bs-btn-border-color: var(--arena-line);
    --bs-btn-hover-bg: var(--arena-panel-2);
    --bs-btn-hover-color: var(--arena-accent-text);
    --bs-btn-hover-border-color: var(--arena-accent);
}

.btn-success {
    --bs-btn-bg: var(--arena-success);
    --bs-btn-border-color: var(--arena-success);
    --bs-btn-hover-bg: var(--arena-success);
    --bs-btn-hover-border-color: var(--arena-success);
}

.btn-danger {
    --bs-btn-bg: var(--arena-danger);
    --bs-btn-border-color: var(--arena-danger);
    --bs-btn-hover-bg: var(--arena-danger);
    --bs-btn-hover-border-color: var(--arena-danger);
}

/* ---------- 8. Cards ---------- */

.card {
    --bs-card-bg: var(--arena-panel);
    --bs-card-border-color: var(--arena-line);
    --bs-card-cap-bg: var(--arena-panel-2);
    --bs-card-cap-color: var(--arena-ink);
    --bs-card-color: var(--arena-ink);
    border-radius: 6px;
    box-shadow: none;
}

.card-header {
    font-family: var(--heading-font);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--arena-line);
}

.card-header .badge { letter-spacing: normal; }

/* Kill the legacy drop-shadow "section" look */
.section { box-shadow: none; border: 1px solid var(--arena-line); }
.section-content { background: var(--arena-panel); }

/* ---------- 9. Tables ---------- */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--arena-ink);
    --bs-table-border-color: var(--arena-row-line);
    --bs-table-striped-bg: var(--arena-row-hover);
    --bs-table-striped-color: var(--arena-ink);
    --bs-table-hover-bg: var(--arena-row-hover);
    --bs-table-hover-color: var(--arena-ink);
    --bs-table-active-bg: var(--arena-accent-soft);
    --bs-table-active-color: var(--arena-ink);
}

.table > thead th,
.table > :not(caption) > * > th {
    font-family: var(--default-font);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--arena-muted);
    border-bottom: 1px solid var(--arena-line);
}

.table-light, .table-secondary, .table-dark {
    --bs-table-bg: var(--arena-panel-2);
    --bs-table-color: var(--arena-ink);
    --bs-table-border-color: var(--arena-row-line);
}

/* tablesorter (7 listing pages): flat header affordance, no theme images */
.table-sorter .tablesorter-header {
    background-image: none !important;
    cursor: pointer;
    padding-right: 20px;
    position: relative;
}

.table-sorter .tablesorter-header:not(.sorter-false)::after {
    content: "\2195";           /* up-down arrow */
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
    color: var(--arena-muted);
    font-size: .7rem;
}

.table-sorter .tablesorter-headerAsc::after { content: "\2191" !important; color: var(--arena-accent-text) !important; }
.table-sorter .tablesorter-headerDesc::after { content: "\2193" !important; color: var(--arena-accent-text) !important; }

/* ---------- 10. Forms ---------- */

.form-control, .form-select {
    background-color: var(--arena-panel);
    border-color: var(--arena-line);
    color: var(--arena-ink);
    border-radius: 4px;
}

.form-control::placeholder { color: var(--arena-muted); opacity: 1; }

.form-control:focus, .form-select:focus {
    background-color: var(--arena-panel);
    border-color: var(--arena-accent);
    color: var(--arena-ink);
    box-shadow: 0 0 0 3px var(--arena-accent-soft);
}

.form-control:disabled, .form-control[readonly],
.form-select:disabled, .uneditable-input {
    background-color: var(--arena-panel-2);
    color: var(--arena-muted);
    border-color: var(--arena-line);
}

.form-label, .control-label { color: var(--arena-ink); font-weight: 500; }
.form-text { color: var(--arena-muted); }
.form-check-input { accent-color: var(--arena-accent); }

.form-check-input:checked {
    background-color: var(--arena-accent);
    border-color: var(--arena-accent);
}

.input-group-text {
    background-color: var(--arena-panel-2);
    border-color: var(--arena-line);
    color: var(--arena-muted);
}

.is-invalid, .form-control.is-invalid { border-color: var(--arena-danger); }
.invalid-feedback { color: var(--arena-danger); }

/* ---------- 11. List groups / pills / dropdown menus / pagination ---------- */

.list-group {
    --bs-list-group-bg: var(--arena-panel);
    --bs-list-group-color: var(--arena-ink);
    --bs-list-group-border-color: var(--arena-line);
    --bs-list-group-action-color: var(--arena-ink);
    --bs-list-group-action-hover-color: var(--arena-accent-text);
    --bs-list-group-action-hover-bg: var(--arena-panel-2);
    --bs-list-group-action-active-bg: var(--arena-panel-2);
    --bs-list-group-action-active-color: var(--arena-accent-text);
    --bs-list-group-active-bg: var(--arena-accent-soft);
    --bs-list-group-active-color: var(--arena-accent-text);
    --bs-list-group-active-border-color: var(--arena-line);
    border-radius: 6px;
}

.list-group-item.active {
    border-left: 3px solid var(--arena-accent);
    font-weight: 600;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--arena-accent);
    --bs-nav-pills-link-active-color: var(--arena-accent-ink);
    --bs-nav-link-color: var(--arena-muted);
    --bs-nav-link-hover-color: var(--arena-ink);
}

.nav-pills .nav-link {
    font-family: var(--heading-font);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    border: 1px solid var(--arena-line);
    border-radius: 3px;
    margin-right: .35rem;
    padding: .45rem 1rem;
}

.nav-pills .nav-link:hover { border-color: var(--arena-accent); color: var(--arena-ink); }
.nav-pills .nav-link.active { border-color: var(--arena-accent); }
.nav.nav-pills .nav-item .nav-link:hover { color: var(--arena-ink); }
.nav.nav-pills .nav-item .nav-link.active:hover { color: var(--arena-accent-ink); }

.dropdown-menu {
    --bs-dropdown-bg: var(--arena-panel);
    --bs-dropdown-color: var(--arena-ink);
    --bs-dropdown-border-color: var(--arena-line);
    --bs-dropdown-link-color: var(--arena-ink);
    --bs-dropdown-link-hover-bg: var(--arena-panel-2);
    --bs-dropdown-link-hover-color: var(--arena-accent-text);
    --bs-dropdown-link-active-bg: var(--arena-accent-soft);
    --bs-dropdown-link-active-color: var(--arena-accent-text);
    --bs-dropdown-header-color: var(--arena-muted);
    border-radius: 6px;
}

/* Pagination — the probe's square stage-tile look */
.pagination { gap: .35rem; }

.pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 .55rem;
    border: 1px solid var(--arena-line);
    border-radius: 3px;
    background: transparent;
    color: var(--arena-muted);
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: .95rem;
    transition: border-color .15s, color .15s;
    box-shadow: none;
}

.pagination .page-link:hover,
.pagination .page-link:focus {
    border-color: var(--arena-accent);
    color: var(--arena-ink);
    background: transparent;
    box-shadow: none;
}

.pagination .page-item.active .page-link {
    border-color: var(--arena-accent);
    color: var(--arena-accent-text);
    background: transparent;
    box-shadow: var(--arena-glow);
}

.pagination .page-item.disabled .page-link {
    opacity: .4;
    border-color: var(--arena-line);
    color: var(--arena-muted);
    background: transparent;
}

.breadcrumb { --bs-breadcrumb-divider-color: var(--arena-muted); }
.breadcrumb-item, .breadcrumb-item.active { color: var(--arena-muted); }
.breadcrumb-item a { color: var(--arena-accent-text); text-decoration: none; }

/* ---------- 12. Alerts / badges / modals ---------- */

.alert { border-radius: 6px; border: 1px solid var(--arena-line); }

.alert-success {
    background: var(--arena-success-soft);
    color: var(--arena-ink);
    border-left: 3px solid var(--arena-success);
}

.alert-danger {
    background: var(--arena-danger-soft);
    color: var(--arena-ink);
    border-left: 3px solid var(--arena-danger);
}

.alert-warning, .alert-info {
    background: var(--arena-accent-soft);
    color: var(--arena-ink);
    border-left: 3px solid var(--arena-accent);
}

.alert a { color: var(--arena-accent-text); }

.badge { border-radius: 3px; font-weight: 600; }
.badge.bg-primary { background: var(--arena-accent) !important; color: var(--arena-accent-ink); }
.badge.bg-secondary, .badge.bg-light, .badge.bg-dark {
    background: var(--arena-panel-2) !important;
    color: var(--arena-muted);
    border: 1px solid var(--arena-line);
}
.badge.bg-success { background: var(--arena-success-soft) !important; color: var(--arena-success); border: 1px solid var(--arena-line); }
.badge.bg-danger { background: var(--arena-danger-soft) !important; color: var(--arena-danger); border: 1px solid var(--arena-line); }
.badge.bg-warning, .badge.bg-info { background: var(--arena-accent-soft) !important; color: var(--arena-accent-text); border: 1px solid var(--arena-line); }

.modal {
    --bs-modal-bg: var(--arena-panel);
    --bs-modal-color: var(--arena-ink);
    --bs-modal-border-color: var(--arena-line);
    --bs-modal-header-border-color: var(--arena-line);
    --bs-modal-footer-border-color: var(--arena-line);
}

.modal-header {
    background: var(--arena-panel-2);
}

.modal-title {
    font-family: var(--heading-font);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ---------- 13. Arena components (probe vocabulary) ---------- */

.arena-kicker {
    font-family: var(--default-font);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .24em;
    color: var(--arena-accent-text);
}

/* Section header: title + rule line + optional trailing link.
   Gets generous top clearance whenever it follows other content, so
   stacked page sections keep their breathing room. */
.arena-section-head {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.arena-section-head:not(:first-child) { margin-top: 3rem; }

.arena-section-head h2 { font-size: 1.9rem; margin: 0; white-space: nowrap; }
.arena-section-head .rule { flex: 1; height: 1px; background: var(--arena-line); }
.arena-section-head a { font-weight: 600; text-decoration: none; white-space: nowrap; }

/* Live strip (home) */
.arena-live {
    background: var(--arena-accent);
    color: var(--arena-accent-ink);
    padding: .55rem 0;
    font-weight: 600;
}

.arena-live a { color: var(--arena-accent-ink); text-decoration: underline; font-weight: 700; }

.arena-live .dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--arena-accent-ink);
    margin-right: .5rem;
    animation: arena-pulse 1.6s infinite;
}

/* Live banner (home) — clickable full-width bar */
a.arena-live-banner {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--arena-accent);
    color: var(--arena-accent-ink);
    font-weight: 600;
    padding: .8rem 1.1rem;
    border-radius: 6px;
    text-decoration: none;
}

a.arena-live-banner:hover { filter: brightness(1.08); color: var(--arena-accent-ink); }

a.arena-live-banner .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--arena-accent-ink);
    flex-shrink: 0;
    animation: arena-pulse 1.6s infinite;
}

.arena-pulse { animation: arena-pulse 1.6s infinite; }

/* Live chip (event headers, home banners) */
.livechip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--arena-accent);
    color: var(--arena-accent-ink);
    font-family: var(--default-font);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .25rem .6rem;
    border-radius: 3px;
    vertical-align: middle;
}

.livechip .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--arena-accent-ink);
    animation: arena-pulse 1.6s infinite;
}

@keyframes arena-pulse { 50% { opacity: .35; } }

/* Discipline / filter chips */
.arena-chip {
    display: inline-block;
    padding: .45rem 1rem;
    border: 1px solid var(--arena-line);
    border-radius: 3px;
    color: var(--arena-muted);
    font-family: var(--heading-font);
    font-weight: 500;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
    transition: border-color .15s, color .15s;
    background: transparent;
}

.arena-chip:hover { border-color: var(--arena-accent); color: var(--arena-ink); }

.arena-chip.on {
    background: var(--arena-accent);
    border-color: var(--arena-accent);
    color: var(--arena-accent-ink);
    font-weight: 700;
}

/* Stage tiles */
.arena-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 .5rem;
    border: 1px solid var(--arena-line);
    border-radius: 3px;
    color: var(--arena-muted);
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}

.arena-tile:hover { border-color: var(--arena-accent); color: var(--arena-ink); }

.arena-tile.on {
    border-color: var(--arena-accent);
    color: var(--arena-accent-text);
    box-shadow: var(--arena-glow);
}

/* Report rail (times/order navigator) — probe stage-navigator Option B,
   cleaned up: one native <details> accordion per discipline, active one
   open, every report a plain link so all ?group= slugs stay reachable */
.arena-rail {
    background: var(--arena-panel);
    border: 1px solid var(--arena-line);
    border-radius: 6px;
    overflow: hidden;
}

.arena-rail details { border-bottom: 1px solid var(--arena-line); }
.arena-rail details:last-child { border-bottom: 0; }

.arena-rail summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1rem;
    font-family: var(--heading-font);
    font-size: 1.05rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--arena-muted);
}

.arena-rail summary::-webkit-details-marker { display: none; }
.arena-rail summary:hover { color: var(--arena-ink); }

.arena-rail details[open] summary {
    color: var(--arena-ink);
    background: var(--arena-panel-2);
}

.arena-rail summary .count {
    margin-left: auto;
    font-family: var(--default-font);
    font-size: .72rem;
    letter-spacing: .1em;
    color: var(--arena-muted);
}

.arena-rail summary::after {
    content: "\25BE";
    font-size: .7rem;
    color: var(--arena-muted);
    transition: transform .15s;
}

.arena-rail details[open] summary::after { transform: rotate(180deg); }

.arena-rail .arena-rail-body { padding: .5rem .9rem .8rem; }
.arena-rail .arena-picker-row { padding: .3rem 0; }
.arena-rail .arena-picker-row .lbl { flex: 1 0 100%; min-width: 0; }
.arena-rail .arena-tile { min-width: 34px; height: 34px; font-size: .95rem; }
.arena-rail .arena-chip { padding: .3rem .7rem; font-size: .8rem; }

/* Unboxed sidebar rail: label + bare controls/links, no card chrome */
.arena-side-group { margin-bottom: 1.75rem; }

.arena-side-group > .lbl {
    display: block;
    color: var(--arena-muted);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: .5rem;
}

.arena-side-link {
    display: flex;
    align-items: center;
    padding: .4rem .75rem;
    color: var(--arena-ink);
    text-decoration: none;
    border-left: 3px solid transparent;
}

.arena-side-link:hover { color: var(--arena-accent-text); }

.arena-side-link.active {
    color: var(--arena-accent-text);
    font-weight: 600;
    border-left-color: var(--arena-accent);
    background: var(--arena-accent-soft);
}

/* Bare stat inside an unboxed rail (replaces sidebar .arena-stat cards) */
.arena-side-group .big {
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 2rem;
    line-height: 1;
}

/* Unboxed sidebar accordion (times/order disciplines) — side-group style,
   native <details>: the open discipline shows its picker rows, the rest
   collapse to one line. Matches the results pages' rail language. */
.arena-side-acc details { margin-bottom: .15rem; }

.arena-side-acc summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .75rem;
    font-family: var(--heading-font);
    font-size: 1.05rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--arena-muted);
    border-left: 3px solid transparent;
}

.arena-side-acc summary::-webkit-details-marker { display: none; }
.arena-side-acc summary:hover { color: var(--arena-ink); }

.arena-side-acc details[open] summary {
    color: var(--arena-accent-text);
    border-left-color: var(--arena-accent);
    background: var(--arena-accent-soft);
}

.arena-side-acc summary .count {
    margin-left: auto;
    font-family: var(--default-font);
    font-size: .72rem;
    letter-spacing: .1em;
    color: var(--arena-muted);
}

.arena-side-acc summary::after {
    content: "\25BE";
    font-size: .7rem;
    color: var(--arena-muted);
    transition: transform .15s;
}

.arena-side-acc details[open] summary::after { transform: rotate(180deg); }

.arena-side-acc .arena-rail-body { padding: .4rem .75rem .6rem; }
.arena-side-acc .arena-picker-row { padding: .3rem 0; }
.arena-side-acc .arena-picker-row .lbl { flex: 1 0 100%; min-width: 0; }
.arena-side-acc .arena-tile { min-width: 34px; height: 34px; font-size: .95rem; }
.arena-side-acc .arena-chip { padding: .3rem .7rem; font-size: .8rem; }

/* Report picker rows (times/order navigator) */
.arena-picker-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .35rem 0;
}

.arena-picker-row .lbl {
    color: var(--arena-muted);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    min-width: 110px;
}

.arena-picker-row .arena-chip { padding: .35rem .8rem; font-size: .85rem; }
.arena-picker-row .arena-tile { min-width: 38px; height: 38px; }

/* Scoreboard card */
.board {
    background: var(--arena-panel);
    border: 1px solid var(--arena-line);
    border-radius: 6px;
    overflow: hidden;
}

/* Jump-link targets land clear of the fixed header */
.board[id] { scroll-margin-top: 100px; }

.board-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    background: var(--arena-panel-2);
    border-bottom: 1px solid var(--arena-line);
    padding: .8rem 1rem;
}

.board-head h2, .board-head h3 { font-size: 1.35rem; margin: 0; }
.board-head .meta { color: var(--arena-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.board-head a { font-weight: 600; text-decoration: none; font-size: .85rem; }

.board-foot {
    background: var(--arena-panel-2);
    border-top: 1px solid var(--arena-line);
    text-align: center;
    padding: .35rem;
    color: var(--arena-muted);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .1em;
}

/* Leaderboard table */
.arena-table { width: 100%; border-collapse: collapse; }
.arena-table th, .arena-table td { padding: .7rem 1rem; text-align: left; }

.arena-table th {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--arena-muted);
    border-bottom: 1px solid var(--arena-line);
}

.arena-table tbody tr { border-bottom: 1px solid var(--arena-row-line); }
.arena-table tbody tr:hover { background: var(--arena-row-hover); }

.arena-table .pos {
    width: 64px;
    text-align: center;
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 1.9rem;
    color: var(--arena-muted);
}

.arena-table .name { font-weight: 500; color: var(--arena-ink); }
.arena-table .cmsa { color: var(--arena-muted); font-size: .8rem; }
.arena-table .cls { color: var(--arena-muted); font-size: .85rem; }

.arena-table .t {
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 1.35rem;
    text-align: right;
    white-space: nowrap;
}

.arena-table .t-minor { font-size: 1rem; color: var(--arena-muted); }
.arena-table .pen { color: var(--arena-danger); }

.arena-table tr.lead {
    background: linear-gradient(90deg, var(--arena-accent-soft), transparent 55%);
}

.arena-table tr.lead .pos {
    color: var(--arena-accent-text);
    text-shadow: 0 0 18px rgba(248, 117, 0, .55);
}

.arena-table tr.lead .name { font-weight: 600; }

.arena-table .more td {
    text-align: center;
    color: var(--arena-muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .15em;
}

.arena-table .unranked-head td {
    background: var(--arena-danger-soft);
    color: var(--arena-danger);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
}

/* Group header row inside class-grouped tables (entries, points) */
.arena-group-head td, .arena-group-head th {
    background: var(--arena-panel-2);
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--arena-ink);
}

.arena-group-head .count { color: var(--arena-muted); font-family: var(--default-font); font-size: .78rem; letter-spacing: .1em; }

/* Hue-keyed group identity — probe table-colors Option B: a light touch of
   muted color distinguishes classes/groups; text stays two-tone. Assign
   .arena-hue-{index % 6} alongside .arena-group-head or .board-head. */
.arena-hue-0 { --arena-hue: #b3574b; }   /* clay  */
.arena-hue-1 { --arena-hue: #7f9166; }   /* sage  */
.arena-hue-2 { --arena-hue: #5f7f97; }   /* slate */
.arena-hue-3 { --arena-hue: #a98b3f; }   /* ochre */
.arena-hue-4 { --arena-hue: #91698f; }   /* plum  */
.arena-hue-5 { --arena-hue: #4f8d82; }   /* teal  */

tr[class*="arena-hue-"].arena-group-head > td:first-child { border-left: 3px solid var(--arena-hue); }
.board-head[class*="arena-hue-"] { border-left: 3px solid var(--arena-hue); }

/* Composable edge for any element carrying an arena-hue-N class
   (list-group items, cards, stat tiles) */
.arena-hue-edge { border-left: 3px solid var(--arena-hue) !important; }

.arena-hue-chip {
    display: inline-block;
    padding: .1rem .55rem;
    border-radius: 3px;
    background: color-mix(in srgb, var(--arena-hue) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--arena-hue) 55%, transparent);
    color: var(--arena-ink);
}

a.arena-hue-chip { text-decoration: none; }
a.arena-hue-chip:hover { border-color: var(--arena-hue); color: var(--arena-ink); }

.arena-hue-chip.on {
    background: color-mix(in srgb, var(--arena-hue) 30%, transparent);
    border-color: var(--arena-hue);
    font-weight: 600;
}

/* Event card (events index, home rails) */
.arena-event-card {
    position: relative;
    background: var(--arena-panel);
    border: 1px solid var(--arena-line);
    border-radius: 6px;
    padding: 1.4rem;
    transition: border-color .15s;
    height: 100%;
}

.arena-event-card:hover { border-color: var(--arena-accent); }

.arena-event-card .date {
    font-family: var(--heading-font);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--arena-accent-text);
    font-size: 1rem;
}

.arena-event-card h3 { font-size: 1.4rem; margin: .2rem 0 .3rem; }
.arena-event-card .loc { color: var(--arena-muted); font-size: .9rem; }

.arena-event-card .tag {
    position: absolute;
    top: 1.1rem;
    right: 1.2rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--arena-muted);
}

/* CMSA-hosted (National) events carry the ember border in the grid */
.arena-event-card.national { border-color: var(--arena-accent); }
.arena-event-card.national .tag { color: var(--arena-accent-text); font-weight: 600; }

/* Hero (home) — gradients verbatim from the arena-night probe: the big
   ember glow rises from the bottom, a faint one falls from the top-left */
.arena-hero {
    position: relative;
    background:
        radial-gradient(1200px 500px at 70% 110%, rgba(248, 117, 0, .22), transparent 60%),
        radial-gradient(900px 400px at 10% -20%, rgba(248, 117, 0, .08), transparent 55%),
        linear-gradient(180deg, #191510 0%, #14110d 100%);
    color: #f3efe8;
}

/* No hairline between the fixed header and a full-bleed hero */
body.has-hero .header { border-bottom-color: transparent; }

.arena-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .015) 0 1px, transparent 1px 3px);
}

.arena-hero h1 {
    font-size: clamp(3rem, 8vw, 5.8rem);
    line-height: .95;
    color: #f3efe8;
    margin-top: .75rem;
}

.arena-hero h1 em { font-style: normal; color: #f87500; }
.arena-hero p { color: #9b9184; max-width: 34rem; margin: 1rem 0 1.75rem; }
.arena-hero .arena-kicker { color: #f87500; }

/* Probe-sized buttons inside the hero (.btn base: .6rem 1.3rem / .9rem) */
.arena-hero .btn {
    font-family: var(--heading-font);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .9rem;
    padding: .6rem 1.3rem;
}

/* Full-bleed hero (home) — rendered via the layout's hero hook in place of
   the page-title band, so it runs edge to edge under the fixed header like
   the arena-night probe (no frame, no outline). It clears the header itself.
   Mobile: copy stacks over the video. Desktop: the video takes the probe's
   photo-slot treatment — anchored bottom-right, tilted, overflowing the
   hero's bottom edge. */
.arena-hero.hero-bleed {
    /* Explicit padding + visible overflow beat Evently's generic
       section { padding: 60px 0; overflow: clip; } — the clip would cut
       the video overhanging the hero's bottom edge. */
    padding: 104px 0 0;
    overflow: visible;
    margin-bottom: 2.5rem;
}

.arena-hero .hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2.5rem;
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}

.arena-hero .hero-copy { flex: 1 1 340px; min-width: 0; }
.arena-hero .hero-video { flex: 1 1 380px; max-width: 560px; min-width: 0; }

/* Probe's photo-slot treatment, carrying the highlight video instead */
.arena-hero .hero-video .frame {
    border: 2px dashed #4a4136;
    border-radius: 6px;
    padding: .5rem;
    background: rgba(20, 17, 13, .5);
}

@media (min-width: 992px) {
    .arena-hero.hero-bleed { margin-bottom: 4rem; }

    .arena-hero .hero-inner {
        display: block;
        min-height: 420px;
        padding-top: 4.5rem;
        padding-bottom: 5rem;
        padding-right: min(46%, 600px);
    }

    /* Top edge aligns with the kicker line (matches .hero-inner padding-top) */
    .arena-hero .hero-video {
        position: absolute;
        right: .75rem;
        top: 4.5rem;
        width: min(42%, 540px);
        max-width: none;
        transform: rotate(-2deg);
    }
}

.arena-hero .video-caption {
    color: #9b9184;              /* always on the dark hero now */
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-top: .8rem;
    text-align: center;
}

/* Ghost button readable on the always-dark hero in both themes */
.arena-hero .btn-outline-primary {
    color: #f3efe8;
    border-color: #4a4136;
}

.arena-hero .btn-outline-primary:hover {
    color: #f87500;
    border-color: #f87500;
}

/* Event card grid (probe: auto-fit 280px) */
.arena-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.1rem;
}

a.arena-event-card,
a.arena-event-card:hover { display: block; text-decoration: none; color: inherit; }

/* Sponsor strip — bone tiles so full-color logos sit on a neutral plate */
.sponsor-strip { background: transparent; margin: 2.75rem 0; }
.sponsor-strip:first-child { margin-top: 0; }

/* Full-bleed sponsor band (probe .sponsors): panel strip with top/bottom
   borders running edge to edge, breaking out of the content container */
.sponsor-band {
    margin: 2.75rem calc(50% - 50vw);
    background: var(--arena-panel);
    border-top: 1px solid var(--arena-line);
    border-bottom: 1px solid var(--arena-line);
    padding: 2.75rem 0;
}

.sponsor-band .sponsor-strip { margin: 0; }

/* Ad banner variant of the band (event pages): tighter vertical rhythm.
   The !importants beat Bootstrap's mb-4/mb-2 utilities on the ads block —
   without them the band reads bottom-heavy. */
.arena-ad-band { padding: 1.5rem 0; margin-top: 0; margin-bottom: 2rem; }
.arena-ad-band .event-ads-top { margin-bottom: 0 !important; }
.arena-ad-band .event-ads-top > a:last-child { margin-bottom: 0 !important; }

/* Guard the 100vw breakout against the scrollbar-width overflow */
html { overflow-x: clip; }

.sponsor-strip-title {
    font-family: var(--default-font);
    color: var(--arena-muted);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .18em;
    text-align: center;
    margin-bottom: .8rem;
}

.sponsor-strip-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8rem;
}

/* Probe sponsor-band Option C: panel chips with a thin frame and generous
   inset so artwork never crowds the edge. Tier classes (set from the strip
   title) size the logos so sponsorship levels keep their visual weight —
   corporate artwork is 130x160 PORTRAIT, national/supporting 130x60.
   Overrides cmsa-modern.css's fixed 128x64 tile and its
   mix-blend-mode: multiply (built for light pages; it muddies logos on
   dark chips). */
.sponsor-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    width: auto;
    /* Plate color comes inline per sponsor (config override or cached
       auto-detection); the thin matching border adds a touch of breathing
       room for tight-cropped artwork. These are the no-data fallbacks. */
    background: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 6px;
    padding: .9rem 1.25rem;
}

.sponsor-tile img {
    max-height: 56px;
    max-width: 140px;
    object-fit: contain;
    mix-blend-mode: normal;
}

.sponsor-strip-corporate-partners .sponsor-tile img { max-height: 120px; max-width: 120px; }
.sponsor-strip-national-partners .sponsor-tile img { max-height: 56px; max-width: 140px; }
.sponsor-strip-supporting-sponsors .sponsor-tile img { max-height: 44px; max-width: 120px; }

/* Empty state */
.arena-empty {
    text-align: center;
    color: var(--arena-muted);
    padding: 3rem 1rem;
}

.arena-empty i { font-size: 2.2rem; display: block; margin-bottom: .8rem; }

/* Stat tile (event show header cards) */
.arena-stat {
    background: var(--arena-panel);
    border: 1px solid var(--arena-line);
    border-radius: 6px;
    padding: 1rem 1.2rem;
    height: 100%;
}

.arena-stat .label {
    color: var(--arena-muted);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.arena-stat .value {
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* Calendar tile (calendarTile() helper, event show page) */
.cal-tile {
    width: 62px;
    flex: 0 0 auto;
    background: var(--arena-panel);
    border: 1px solid var(--arena-line);
    border-radius: 4px;
}

.cal-tile .cal-mo {
    background: var(--arena-accent);
    color: var(--arena-accent-ink);
    padding: 3px 0;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.cal-tile .cal-day {
    font-family: var(--heading-font);
    padding: 4px 0 2px;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--arena-ink);
    line-height: 1;
}

.cal-tile .cal-yr { font-size: .65rem; color: var(--arena-muted); padding: 0 0 3px; }
.cal-sep { color: var(--arena-muted); font-size: 1.2rem; }

/* Medal / podium accents (points tables) */
.arena-podium-1 { color: var(--arena-accent-text); font-weight: 700; text-shadow: 0 0 18px rgba(248, 117, 0, .45); }
.arena-podium-2, .arena-podium-3 { color: var(--arena-accent-text); font-weight: 600; text-shadow: none; }

/* First place: the rank numeral overlaid on the trophy cup — one glyph
   wide, so the row keeps the same height as plain numeral rows. The
   numeral uses the body font at heavy weight: a condensed "1" at this
   size renders as a 3px sliver and disappears. */
.arena-pos-trophy {
    position: relative;
    display: inline-block;
    font-size: 1.75rem;
    line-height: 1;
}

.arena-pos-trophy > i { display: block; }

.arena-pos-trophy .n {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--default-font);
    font-size: .52em;
    font-weight: 800;
    color: var(--arena-bg);
    text-shadow: none;
}

/* Video / iframe frame (livefeed, home embeds, FB feed) */
.arena-frame {
    background: var(--arena-panel);
    border: 1px solid var(--arena-line);
    border-radius: 6px;
    padding: .75rem;
}

.arena-ratio-16x9 {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
}

.arena-ratio-16x9 > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 4px;
}

/* Private rider masking */
.arena-private { color: var(--arena-muted); font-style: italic; }

/* Dark plate for white line-art images (event type icons, logo) so they
   survive the light theme */
.arena-dark-plate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #14110d;
    border-radius: 4px;
    padding: 6px;
}

/* Event list row (events index) */
.arena-event-row { display: flex; }

.arena-event-row .when {
    flex: 0 0 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    background: var(--arena-panel-2);
    border-right: 1px solid var(--arena-line);
    color: var(--arena-muted);
    font-size: .75rem;
    text-align: center;
    padding: 1rem .5rem;
}

.arena-event-row .body { flex: 1; padding: 1rem 1.25rem; min-width: 0; }

.arena-event-row h3 { font-size: 1.35rem; margin-bottom: .15rem; }
.arena-event-row h3 a { color: var(--arena-ink); text-decoration: none; }
.arena-event-row h3 a:hover { color: var(--arena-accent-text); }

.arena-event-row .date {
    font-family: var(--heading-font);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--arena-accent-text);
}

@media (max-width: 767px) {
    .arena-event-row .when { display: none; }
}

/* ---------- 14. Fancybox on-theme ---------- */

.fancybox__backdrop { background: rgba(20, 17, 13, .92); }

/* Event program (details tab): the event form read-only, one card per group,
   packed into columns (Main Match is far taller than the rest) */
.event-program { column-width: 320px; column-gap: 1.1rem; }
.event-program .card { display: inline-block; width: 100%; margin-bottom: 1.1rem; break-inside: avoid; }
.event-program .table { --bs-table-bg: transparent; }
.event-program .table td, .event-program .table th { padding: .45rem .9rem; overflow-wrap: anywhere; }