/* Shared look for the three live arena pages (Judges, Onsite, Public) - most often shown on a
   screen at the venue rather than read up close, so sizing leans large and legible rather than
   compact. Broadcast-results style (bold condensed type, boxed numbers, one accent colour) in a
   light and a dark theme, picked by data-theme on <html> (see js/ArenaSettings.js). Brand-neutral on
   purpose: the site serves every customer, not only ALGE installs. This stylesheet is only linked
   from the arena views, so the :root tokens never reach the admin/site pages. */

/* Barlow Condensed, self-hosted (wwwroot/fonts, SIL OFL) so it also works offline at venues.
   Condensed sports/broadcast face: fits more columns per row and reads well on arena screens. */
@font-face {
    font-family: "Barlow Condensed";
    src: url("../fonts/BarlowCondensed-Medium.ttf") format("truetype");
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url("../fonts/BarlowCondensed-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url("../fonts/BarlowCondensed-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url("../fonts/BarlowCondensed-ExtraBold.ttf") format("truetype");
    font-weight: 800 900;
    font-style: normal;
    font-display: swap;
}

/* Titles only (class name, section headings) - the slanted broadcast headline look */
@font-face {
    font-family: "Barlow Condensed";
    src: url("../fonts/BarlowCondensed-ExtraBoldItalic.ttf") format("truetype");
    font-weight: 700 900;
    font-style: italic;
    font-display: swap;
}

/* ---------- Theme tokens ---------- */

:root,
:root[data-theme="light"] {
    color-scheme: light;
    --arena-bg: #eceff3;
    --arena-bg-image: linear-gradient(118deg, transparent 0 64%, rgba(13, 122, 112, 0.03) 64% 71%, transparent 71% 74%, rgba(13, 122, 112, 0.02) 74% 76%, transparent 76%);
    --arena-surface: #ffffff;
    --arena-surface-alt: #f5f7f9;
    --arena-border: #dfe3e8;
    --arena-divider: #e9ecf0;
    --arena-text: #121820;
    --arena-text-muted: #5b6573;
    --arena-ink: #0a0f15;
    --arena-accent: #0d7a70;
    --arena-accent-soft: #e0f2ef;
    --arena-success: #1f8a4c;
    --arena-success-soft: #e2f4e7;
    --arena-warning: #b25e05;
    --arena-warning-soft: #fdf0dc;
    --arena-danger: #b42318;
    --arena-danger-soft: #fdeceb;
    --arena-box: #0a0f15;
    --arena-box-text: #ffffff;
    --arena-shadow: 0 1px 2px rgba(10, 15, 21, 0.06), 0 4px 14px rgba(10, 15, 21, 0.06);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --arena-bg: #06090f;
    --arena-bg-image: radial-gradient(1100px 520px at 88% -8%, rgba(45, 212, 191, 0.11), transparent 62%),
        linear-gradient(118deg, transparent 0 64%, rgba(255, 255, 255, 0.03) 64% 64.6%, transparent 64.6% 70%, rgba(255, 255, 255, 0.022) 70% 71.4%, transparent 71.4%);
    --arena-surface: #0f1520;
    --arena-surface-alt: #131a27;
    --arena-border: #222b3a;
    --arena-divider: #1b2330;
    --arena-text: #e9eef5;
    --arena-text-muted: #8e9aab;
    --arena-ink: #ffffff;
    --arena-accent: #2dd4bf;
    --arena-accent-soft: rgba(45, 212, 191, 0.13);
    --arena-success: #4ade80;
    --arena-success-soft: rgba(74, 222, 128, 0.12);
    --arena-warning: #fbbf24;
    --arena-warning-soft: rgba(251, 191, 36, 0.13);
    --arena-danger: #f87171;
    --arena-danger-soft: rgba(248, 113, 113, 0.14);
    --arena-box: #ffffff;
    --arena-box-text: #06090f;
    --arena-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* The page background lives on html/body (not .arena-page) so it also covers overscroll and the area
   below a short page, and stays put (fixed) while long result lists scroll over it. */
html,
body {
    background: var(--arena-bg) !important;
}

body {
    background-image: var(--arena-bg-image) !important;
    background-attachment: fixed !important;
}

.arena-page {
    --arena-radius: 8px;
    --arena-gutter: 18px;

    color: var(--arena-text);
    font-family: "Barlow Condensed", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    font-weight: 600;
    box-sizing: border-box;
    font-size: clamp(16px, 0.7vw + 12px, 22px);

    /* Full-bleed: cancel out _Layout's container-fluid padding (a fixed 15px at every breakpoint)
       plus the body's own 4px margin (so -19px horizontally, -4px vertically). A 100vw-based
       approach looks equivalent but double-counts the scrollbar gutter in some browsers, which is
       what was producing the extra scrollbars. */
    margin: -4px -19px;
    padding: 20px 19px;
    min-height: 100vh;
}

.arena-page * {
    box-sizing: border-box;
}

.arena-page h1,
.arena-page h2 {
    letter-spacing: normal;
}

/* ---------- Header: class name + live connection chip ---------- */

.arena-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    /* keep clear of the settings button in the top right corner */
    padding-right: 48px;
}

.arena-header__title {
    position: relative;
    font-size: clamp(1.7em, 2.8vw, 2.8em);
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    color: var(--arena-ink);
    line-height: 1;
    letter-spacing: 0.005em;
    padding-bottom: 10px;
}

/* short slanted accent bar under the title */
.arena-header__title::after {
    content: "";
    position: absolute;
    left: 2px;
    bottom: 0;
    width: 64px;
    height: 5px;
    background: var(--arena-accent);
    transform: skewX(-18deg);
}

.arena-header__title:empty {
    display: none;
}

#connectionStateElement.arena-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--arena-success-soft);
    color: var(--arena-success);
    font-size: 0.6em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

#connectionStateElement.arena-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

#connectionStateElement.arena-status.alert-danger {
    background: var(--arena-warning-soft);
    color: var(--arena-warning);
}

.arena-page .message {
    margin-bottom: 16px;
}

.arena-page #messageDiv {
    background: var(--arena-warning-soft);
    border: 1px solid var(--arena-warning);
    border-left-width: 5px;
    border-radius: var(--arena-radius);
    margin: 0;
    padding: 14px 18px;
}

.arena-page #message {
    text-transform: none;
    text-align: left;
    color: var(--arena-warning);
    font-size: 0.7em;
    font-weight: 700;
}

/* ---------- Panels (result list, riders to come, team results) ---------- */

.arena-panel {
    background: var(--arena-surface);
    border: 1px solid var(--arena-border);
    border-radius: var(--arena-radius);
    box-shadow: var(--arena-shadow);
    overflow: hidden;
    max-width: 100%;
    margin-bottom: 14px;
}

/* Section heading: slanted uppercase with a skewed accent block, like a broadcast lower third */
.arena-panel h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 13px var(--arena-gutter) 11px;
    font-size: 0.8em;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--arena-ink);
    border-bottom: 1px solid var(--arena-border);
}

.arena-panel h2::before {
    content: "";
    flex: none;
    width: 7px;
    height: 1.05em;
    background: var(--arena-accent);
    transform: skewX(-18deg);
}

.arena-panel-columns {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.arena-panel-columns > .arena-panel {
    flex: 1 1 420px;
    min-width: 0;
}

/* ---------- Tables ---------- */

.arena-page table.fullWidth {
    width: 100%;
    border-collapse: collapse;
}

.arena-page thead {
    background: transparent;
    color: var(--arena-text-muted);
}

.arena-page th {
    font-size: 0.55em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    padding: 10px 10px 8px 0;
    border-bottom: 1px solid var(--arena-border);
    white-space: nowrap;
}

.arena-page td {
    padding: 7px 10px 7px 0;
    font-size: 0.9em;
    line-height: 1.15;
    vertical-align: middle;
    border-bottom: 1px solid var(--arena-divider);
}

/* rows run edge to edge; the outer cells carry the panel's inset instead */
.arena-page th:first-child,
.arena-page td:first-child {
    padding-left: var(--arena-gutter);
}

.arena-page th:last-child,
.arena-page td:last-child {
    padding-right: var(--arena-gutter);
}

/* Same-width digits, so ranks, faults and times line up in their columns */
.arena-page td.rank,
.arena-page td.bib,
.arena-page td.faults,
.arena-page td.time,
.arena-page td.total,
.arena-page td.jumpOffNr {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.arena-page th.rank,
.arena-page td.rank {
    width: 1%;
    text-align: center;
}

.arena-page td.rank {
    font-size: 1.2em;
    font-weight: 800;
    color: var(--arena-ink);
}

/* Rider on top, the horse (with its head number) underneath */
.arena-page td.rider-horse {
    width: 99%;
}

.arena-page td.rider-horse .rider {
    display: block;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--arena-ink);
}

.arena-page td.rider-horse .horse {
    display: block;
    margin-top: 2px;
    font-size: 0.78em;
    font-weight: 600;
    color: var(--arena-text-muted);
}

.arena-page td.nation,
.arena-page td.team {
    white-space: nowrap;
}

.arena-page th.nation,
.arena-page td.nation {
    width: 1%;
    text-align: center;
}

/* Nation as a black chip: the flag on the left with a 2px black frame, the code in white beside it,
   turned 90 degrees to read top to bottom. Black in both themes, like a broadcast graphic. */
.arena-page .nation-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px;
    background: #000000;
    vertical-align: middle;
    line-height: 1;
}

.arena-page .nation-flag {
    display: block;
    flex: none;
    width: 1.47em;      /* 3:2, like the flag files (75x50) */
    height: 0.98em;
    object-fit: cover;
}

.arena-page .nation-code {
    writing-mode: vertical-rl;
    padding: 0 2px 0 1px;
    font-size: 0.53em;   /* a three-letter code then runs about the full flag height */
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #ffffff;
}

/* no flag file: the code alone, at the same height as a chip with a flag */
.arena-page .nation-chip:not(:has(.nation-flag)) {
    min-height: calc(0.98em + 4px);
    padding: 2px 4px;
}

.arena-page img.nation {
    width: 1.43em !important;   /* 3:2, like the flag files */
    height: 0.95em !important;
    margin-right: 6px;
    border-radius: 2px;
    object-fit: cover;
    vertical-align: -0.1em;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.arena-page td.team .team-name {
    font-weight: 800;
    text-transform: uppercase;
    color: var(--arena-ink);
}

/* Scores: big and bold, the time split off by a thin rule like "faults | time" */
.arena-page td.faults,
.arena-page td.time,
.arena-page td.total {
    text-align: right;
    font-size: 1.1em;
    font-weight: 800;
    color: var(--arena-ink);
}

.arena-page td.time {
    padding-left: 10px;
    box-shadow: inset 1px 0 0 var(--arena-border);
}

/* clear gap between the nation and the scores */
.arena-page th.faults,
.arena-page td.faults,
.arena-page td.total {
    padding-left: 32px;
}

.arena-page td.jumpOffNr {
    text-align: right;
    font-size: 0.75em;
    color: var(--arena-text-muted);
}

/* Start number in an outlined box, as on the broadcast standings */
.arena-page th.bib,
.arena-page td.bib {
    width: 1%;
    text-align: center;
}

.arena-page .bib-box {
    display: inline-block;
    min-width: 2.3em;
    padding: 2px 6px;
    border: 2px solid var(--arena-ink);
    border-radius: 6px;
    font-weight: 800;
    color: var(--arena-ink);
    text-align: center;
    line-height: 1.1;
}

.arena-page .bib-box:empty {
    display: none;
}

.arena-page tbody tr:nth-child(2n) {
    background: var(--arena-surface-alt);
}

.arena-page tbody tr:nth-child(2n+1) {
    background: transparent;
}

.arena-page tbody tr:last-child td {
    border-bottom: none;
}

.arena-page tbody tr:hover {
    background: var(--arena-accent-soft);
}

/* Next to go / just finished: tinted row with a solid bar on the left edge */
.arena-page tr.isStaged {
    background: var(--arena-accent-soft) !important;
    box-shadow: inset 5px 0 0 var(--arena-accent);
}

.arena-page tr.isStaged .bib-box {
    background: var(--arena-accent);
    border-color: var(--arena-accent);
    color: var(--arena-box-text);
}

.arena-page tr.isFinished {
    background: var(--arena-success-soft) !important;
    box-shadow: inset 5px 0 0 var(--arena-success);
}

.arena-page .previous {
    color: var(--arena-text-muted);
}

/* ---------- Onsite (venue screen): results fill the screen, next riders the bottom 20% ---------- */

@media only screen and (min-width: 851px) {
    html:has(.arena-page--onsite),
    body:has(.arena-page--onsite) {
        overflow: hidden;
    }

    .arena-page--onsite {
        display: flex;
        flex-direction: column;
        height: 100vh;
        min-height: 0;
        overflow: hidden;
    }

    .arena-page--onsite > .arena-header,
    .arena-page--onsite > .message {
        flex: none;
    }

    /* the lists sit side by side, each at most as tall as the space left above the next riders */
    .arena-onsite__results {
        flex: 1 1 auto;
        min-height: 0;
        flex-wrap: nowrap;
        align-items: flex-start;
        margin-bottom: 14px;
    }

    .arena-onsite__results > .arena-panel {
        display: flex;
        flex-direction: column;
        max-height: 100%;
        margin-bottom: 0;
    }

    .arena-onsite__results > .arena-panel > h2 {
        flex: none;
    }

    /* Only the rows move: the panel title stays above the scroll area and the column headers stick
       to its top, while AutoScroll.js scrolls the rows in a loop (no scrollbar). */
    .arena-panel__scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    .arena-panel__scroll th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--arena-surface);
        /* a collapsed border doesn't travel with a sticky cell - draw the rule as a shadow instead */
        border-bottom: none;
        box-shadow: inset 0 -1px 0 var(--arena-border);
    }

    .arena-page--onsite > #ridersToComeTab {
        flex: 0 0 20vh;
        height: 20vh;
        margin-bottom: 0;
    }
}

/* ---------- Current / previous rider cards ---------- */

.rider-live-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.rider-card {
    position: relative;
    background: var(--arena-surface);
    border: 1px solid var(--arena-border);
    border-radius: var(--arena-radius);
    box-shadow: var(--arena-shadow);
    overflow: hidden;
    padding: 14px var(--arena-gutter) 14px calc(var(--arena-gutter) + 4px);
}

/* bar down the left edge - accent for the rider on course, a quieter grey for the previous one
   (a near-background grey there read as a rendering glitch rather than a bar) */
.rider-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--arena-text-muted);
    opacity: 0.45;
}

.rider-card--current::before {
    background: var(--arena-accent);
    opacity: 1;
}

.rider-card--previous {
    background: var(--arena-surface-alt);
}

.rider-card__label {
    font-size: 0.62em;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--arena-accent);
    margin-bottom: 10px;
}

.rider-card--previous .rider-card__label {
    color: var(--arena-text-muted);
}

.rider-card__main {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.rider-card__bib {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1em;
    height: 1.75em;
    padding: 0 0.35em;
    border-radius: 7px;
    background: var(--arena-box);
    color: var(--arena-box-text);
    font-size: 1.4em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.rider-card--previous .rider-card__bib {
    background: transparent;
    color: var(--arena-text-muted);
    box-shadow: inset 0 0 0 2px var(--arena-text-muted);
}

.rider-card__names {
    min-width: 0;
}

.rider-card__horse {
    display: block;
    font-size: 1.45em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.05;
    color: var(--arena-ink);
}

.rider-card--previous .rider-card__horse {
    color: var(--arena-text-muted);
}

.rider-card__rider {
    display: block;
    margin-top: 3px;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--arena-text-muted);
}

.rider-card__phase {
    display: inline-block;
    margin-left: auto;
    padding: 0.35em 0.8em;
    border-radius: 999px;
    background: var(--arena-accent-soft);
    color: var(--arena-accent);
    font-size: 0.58em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
}

.rider-card--previous .rider-card__phase {
    background: var(--arena-divider);
    color: var(--arena-text-muted);
}

/* No bib/phase yet - don't render an empty coloured pill */
.rider-card__bib:empty,
.rider-card__phase:empty {
    display: none;
}

/* Stats on a fixed column grid: every label sits in the same column in both the current and the
   previous card (both cards are the same width), instead of wrapping wherever its text ends.
   Labels and values are two grid rows (the stat wrappers are display: contents), each aligned on
   its baseline - so the larger time sits on the same line as the other values, and its label on
   the same line as the other labels. */
.rider-card__stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    column-gap: 12px;
    align-items: baseline;
    border-top: 1px solid var(--arena-border);
    padding-top: 12px;
}

.rider-card__stat {
    display: contents;
}

.rider-card__stat-label {
    display: block;
    min-width: 0;
    font-size: 0.55em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--arena-text-muted);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rider-card__stat-value {
    display: block;
    min-width: 0;
    min-height: 1.3em;
    font-size: 1.2em;
    font-weight: 800;
    line-height: 1.2;
    color: var(--arena-ink);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* The running/final time is what everyone looks at - biggest, and in the accent colour */
.rider-card__stat--time .rider-card__stat-value {
    color: var(--arena-accent);
    font-size: 1.6em;
    line-height: 1;
}

.rider-card--previous .rider-card__stat-value {
    color: var(--arena-text-muted);
}

/* ---------- Users directory (/users, /users/{username}) ---------- */

.directory-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 0.62em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.directory-back::before {
    content: "";
    width: 7px;
    height: 7px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.arena-page a.directory-back,
.arena-page a.directory-back:visited {
    color: var(--arena-text-muted);
    text-decoration: none;
}

.arena-page a.directory-back:hover {
    color: var(--arena-accent);
}

.directory-search input {
    width: min(340px, 100%);
    padding: 9px 14px 9px 38px;
    border: 1px solid var(--arena-border);
    border-radius: 999px;
    background: var(--arena-surface) no-repeat 14px center / 16px;
    /* magnifier, drawn in the muted text colour of either theme */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e9aab' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
    color: var(--arena-text);
    font: inherit;
    font-size: 0.72em;
    font-weight: 600;
    box-shadow: var(--arena-shadow);
}

.directory-search input::placeholder {
    color: var(--arena-text-muted);
}

.directory-search input:focus {
    outline: none;
    border-color: var(--arena-accent);
    box-shadow: 0 0 0 3px var(--arena-accent-soft);
}

.directory-summary {
    margin: -4px 0 14px;
    font-size: 0.62em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--arena-text-muted);
}

.directory-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
    gap: 14px;
    align-items: start;
}

.directory-empty {
    padding: 30px 0;
    text-align: center;
    color: var(--arena-text-muted);
    font-weight: 700;
}

.user-card {
    background: var(--arena-surface);
    border: 1px solid var(--arena-border);
    border-radius: var(--arena-radius);
    box-shadow: var(--arena-shadow);
    overflow: hidden;
}

.user-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 13px var(--arena-gutter) 11px;
    border-bottom: 1px solid var(--arena-border);
}

.arena-page a.user-card__name,
.arena-page a.user-card__name:visited {
    font-size: 1.05em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--arena-ink);
    text-decoration: none;
}

.arena-page a.user-card__name:hover {
    color: var(--arena-accent);
}

.user-card__username {
    font-size: 0.7em;
    font-weight: 600;
    color: var(--arena-text-muted);
}

/* number of arenas, pushed to the right edge of the card head */
.user-card__count {
    margin-left: auto;
    min-width: 1.9em;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--arena-surface-alt);
    border: 1px solid var(--arena-border);
    font-size: 0.62em;
    font-weight: 800;
    text-align: center;
    color: var(--arena-text-muted);
}

.arena-badge {
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.55em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
}

.arena-badge--demo {
    background: var(--arena-warning-soft);
    color: var(--arena-warning);
}

.arena-badge--expired {
    background: var(--arena-danger-soft);
    color: var(--arena-danger);
}

.arena-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* info on top, the page buttons always on their own line below - the same in every row, however
   many buttons an arena has */
.arena-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    padding: 12px var(--arena-gutter);
    border-bottom: 1px solid var(--arena-divider);
}

.arena-row:last-child {
    border-bottom: none;
}

.arena-row__info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.arena-row__id {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    color: var(--arena-ink);
}

/* uploaded within the last 10 minutes (ArenaViewModel.IsLive) */
.live-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--arena-success);
    box-shadow: 0 0 0 3px var(--arena-success-soft);
}

.arena-row__meta {
    display: flex;
    gap: 6px;
    min-width: 0;
    font-size: 0.72em;
    font-weight: 600;
    color: var(--arena-text-muted);
    white-space: nowrap;
}

.arena-row__class {
    overflow: hidden;
    text-overflow: ellipsis;
}

.arena-row__class + .arena-row__updated::before {
    content: "·";
    margin-right: 6px;
}

.arena-row__updated {
    flex: none;
}

.arena-row__links {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.arena-page a.arena-btn,
.arena-page a.arena-btn:visited {
    padding: 7px 12px;
    border: 1px solid var(--arena-border);
    border-radius: 6px;
    background: var(--arena-surface-alt);
    color: var(--arena-ink);
    font-size: 0.64em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    white-space: nowrap;
}

.arena-page a.arena-btn:hover {
    border-color: var(--arena-accent);
    color: var(--arena-accent);
}

.arena-page a.arena-btn--primary,
.arena-page a.arena-btn--primary:visited {
    background: var(--arena-accent);
    border-color: var(--arena-accent);
    color: var(--arena-box-text);
}

.arena-page a.arena-btn--primary:hover {
    color: var(--arena-box-text);
    filter: brightness(1.1);
}

/* /users/{username}: each arena is a card of its own */
.arena-list--cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: 14px;
}

.arena-list--cards .arena-row {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px var(--arena-gutter) 16px calc(var(--arena-gutter) + 4px);
    overflow: hidden;
    background: var(--arena-surface);
    border: 1px solid var(--arena-border);
    border-radius: var(--arena-radius);
    box-shadow: var(--arena-shadow);
}

.arena-list--cards .arena-row:last-child {
    border-bottom: 1px solid var(--arena-border);
}

/* same left-edge bar as the rider cards: accent while live */
.arena-list--cards .arena-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--arena-text-muted);
    opacity: 0.45;
}

.arena-list--cards .arena-row:has(.live-dot)::before {
    background: var(--arena-accent);
    opacity: 1;
}

.arena-list--cards .arena-row__info {
    flex: none;
}

.arena-list--cards .arena-row__id {
    font-size: 1.25em;
    text-transform: uppercase;
}

.arena-list--cards .arena-row__meta {
    font-size: 0.78em;
}

/* ---------- Settings button (theme switch), top right ---------- */

.arena-settings {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 1000;
    font-family: "Barlow Condensed", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.arena-settings.is-visible,
.arena-settings.is-open,
.arena-settings:focus-within {
    opacity: 1;
    pointer-events: auto;
}

.arena-settings__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--arena-border);
    border-radius: 50%;
    background: var(--arena-surface);
    color: var(--arena-ink);
    box-shadow: var(--arena-shadow);
    cursor: pointer;
}

.arena-settings__toggle:hover,
.arena-settings.is-open .arena-settings__toggle {
    color: var(--arena-accent);
    border-color: var(--arena-accent);
}

.arena-settings__toggle svg {
    transition: transform 0.4s ease;
}

.arena-settings.is-open .arena-settings__toggle svg {
    transform: rotate(60deg);
}

.arena-settings__menu {
    display: none;
    position: absolute;
    top: 50px;
    right: 0;
    min-width: 230px;
    padding: 6px;
    border: 1px solid var(--arena-border);
    border-radius: 10px;
    background: var(--arena-surface);
    box-shadow: var(--arena-shadow);
}

.arena-settings.is-open .arena-settings__menu {
    display: block;
}

.arena-settings__title {
    padding: 6px 10px 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--arena-text-muted);
}

.arena-settings__option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--arena-text);
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.arena-settings__option:hover {
    background: var(--arena-surface-alt);
}

.arena-settings__option[aria-checked="true"] {
    background: var(--arena-accent-soft);
    color: var(--arena-accent);
    font-weight: 800;
}

.arena-settings__title--section {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--arena-border);
}

.arena-settings__segmented {
    display: flex;
    gap: 4px;
}

.arena-settings__segmented .arena-settings__option {
    flex: 1 1 0;
    justify-content: center;
    padding: 7px 6px;
    font-size: 15px;
}

/* ---------- Mobile ---------- */

@media only screen and (max-width: 850px) {
    /* Every box - rider cards and tables alike - sits at the same 7px inset, with the same 7px
       between boxes. */
    .arena-page {
        --arena-gutter: 12px;
        padding: 7px;
    }

    .arena-header {
        margin: 6px 5px 10px;
    }

    /* Stacked: stretch every panel to the full width (flex-start would shrink each table to its
       content) and drop the desktop flex-basis, which in a column turns into a minimum height. */
    .arena-panel-columns {
        flex-direction: column;
        align-items: stretch;
        gap: 7px;
        margin-bottom: 7px;
    }

    .arena-panel-columns > .arena-panel {
        flex: none;
        margin-bottom: 0;
    }

    .arena-panel {
        margin-bottom: 7px;
    }

    .rider-live-grid {
        grid-template-columns: 1fr;
        gap: 7px;
        margin-bottom: 7px;
    }

    .rider-card__stats {
        column-gap: 8px;
    }

    .arena-page th,
    .arena-page td {
        padding-right: 7px;
    }

    /* long headers ("Faults/Points") may wrap rather than widen the table past the screen */
    .arena-page th {
        white-space: normal;
    }

    /* flag alone in the chip on a phone - flag and code side by side push the table past the
       screen edge. The code stays when there's no flag file to show instead. */
    .arena-page .nation-chip:has(.nation-flag) .nation-code {
        display: none;
    }

    .arena-page .nation-flag {
        width: 1.2em;
        height: 0.8em;
    }

    .arena-settings {
        top: 8px;
        right: 8px;
    }
}