/* ==========================================================================
   FR Systems — 24 Hour Results
   "Midnight race" design system: dark navy night theme, cyan timing accents,
   condensed athletic display type + monospaced timing figures.
   ========================================================================== */

:root {
    /* Palette */
    --bg0: #07061A;
    --bg1: #0D0B2A;
    --panel: #13103D;
    --panel-2: #181450;
    --panel-3: #0F0D33;
    --line: rgba(138, 148, 255, 0.14);
    --line-strong: rgba(138, 148, 255, 0.26);

    --cyan: #00AEEF;
    --cyan-bright: #45C8FF;
    --cyan-soft: rgba(0, 174, 239, 0.12);
    --cyan-glow: rgba(0, 174, 239, 0.35);

    --ink: #F0F2FF;
    --muted: #9AA1D6;
    --faint: #686F9F;

    --gold: #FFC93C;
    --silver: #C9D1E5;
    --bronze: #E08D4F;
    --green: #2EE6A8;
    --red: #FF5D73;

    /* Type */
    --font-display: 'Saira Condensed', 'Arial Narrow', sans-serif;
    --font-body: 'Saira', 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', 'Consolas', monospace;

    /* Shape */
    --radius: 14px;
    --radius-sm: 9px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
    background-color: var(--bg0);
    background-image:
        radial-gradient(900px 420px at 12% -8%, rgba(0, 174, 239, 0.16), transparent 60%),
        radial-gradient(1100px 600px at 95% 8%, rgba(86, 70, 200, 0.20), transparent 65%),
        radial-gradient(700px 700px at 50% 120%, rgba(43, 39, 101, 0.55), transparent 70%),
        linear-gradient(180deg, var(--bg1), var(--bg0) 480px);
    background-attachment: fixed;
}

/* Faint diagonal "lane lines" texture across the whole page */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        115deg,
        transparent 0px,
        transparent 90px,
        rgba(138, 148, 255, 0.028) 90px,
        rgba(138, 148, 255, 0.028) 92px
    );
    z-index: 0;
}

form, .page-root { position: relative; z-index: 1; }

h1, h2, h3, h4 { margin: 0; }

img { display: block; }

.shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

main.shell { padding-top: 28px; padding-bottom: 64px; }

/* Utilities (kept tiny — used by script toggles) */
.hidden { display: none !important; }
.block  { display: block !important; }
.mono   { font-family: var(--font-mono); }

::selection { background: rgba(0, 174, 239, 0.35); color: #fff; }

/* Scrollbar (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg1); }
::-webkit-scrollbar-thumb { background: #2A2768; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #3A3690; }

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.8); }
}

@keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.fade-in { animation: fadeIn 0.3s ease-out; }

.anim-rise   { animation: rise 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
.anim-rise-1 { animation: rise 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both; }
.anim-rise-2 { animation: rise 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both; }
.anim-rise-3 { animation: rise 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(10, 9, 32, 0.82);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-top: 14px;
    padding-bottom: 14px;
    flex-wrap: wrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    min-width: 0;
    border-radius: var(--radius-sm);
    transition: opacity 0.15s ease;
}

a.brand:hover { opacity: 0.85; }

a.brand:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 4px;
}

.brand-badge {
    background: #fff;
    border-radius: 12px;
    padding: 6px 10px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 18px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
}

.brand-badge img { height: 38px; width: auto; }

.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }

.brand-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.45rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
}

.brand-title em {
    font-style: normal;
    color: var(--cyan-bright);
}

.brand-sub {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--faint);
    margin-top: 3px;
}

/* Event picker */
.event-picker {
    position: relative;
    flex: 1 1 320px;
    max-width: 460px;
    min-width: 240px;
}

.event-picker select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 12px 40px 12px 36px;
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.event-picker select:hover { border-color: var(--cyan); }

.event-picker select:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px var(--cyan-soft);
}

.event-picker select optgroup,
.event-picker select option {
    background: var(--panel);
    color: var(--ink);
}

.picker-caret {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cyan-bright);
    font-size: 0.75rem;
    pointer-events: none;
}

.live-indicator {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 10px rgba(46, 230, 168, 0.8);
    animation: pulse 1.6s infinite;
    z-index: 2;
}

/* --------------------------------------------------------------------------
   Hero / empty help panel
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        linear-gradient(120deg, rgba(0, 174, 239, 0.10), transparent 45%),
        linear-gradient(180deg, var(--panel), var(--panel-3));
    padding: 44px 36px 48px;
    margin-bottom: 24px;
}

.hero::after {
    /* Giant watermark "24" */
    content: '24';
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(9rem, 22vw, 15rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px rgba(69, 200, 255, 0.14);
    pointer-events: none;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cyan-bright);
    margin: 0 0 14px;
}

.hero-kicker::before {
    content: '';
    width: 26px;
    height: 2px;
    background: var(--cyan);
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.4rem, 6vw, 4rem);
    line-height: 0.98;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    max-width: 14em;
}

.hero-title em {
    font-style: normal;
    color: var(--cyan-bright);
    text-shadow: 0 0 30px var(--cyan-glow);
}

.hero-sub {
    margin: 16px 0 0;
    max-width: 34em;
    color: var(--muted);
    font-size: 1rem;
}

/* --------------------------------------------------------------------------
   Event browser / category picker
   -------------------------------------------------------------------------- */

.event-browser { margin-bottom: 28px; }

.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 16px;
}

.section-title i { color: var(--cyan-bright); font-size: 1rem; }

.event-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

@media (max-width: 480px) {
    .event-grid { grid-template-columns: 1fr; }
}

.event-card {
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 18px 16px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.event-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 174, 239, 0.4);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
}

.event-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.event-card-head h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.04em;
    min-width: 0;
    overflow-wrap: anywhere;
}

.event-card .chip-row { margin-bottom: 0; }

.event-group-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 0 0 12px;
}

.event-group-title.is-live { color: var(--green); }

#eventBrowser .event-grid + .event-group-title { margin-top: 26px; }

.event-card--live {
    border-color: rgba(46, 230, 168, 0.35);
    box-shadow: 0 0 0 1px rgba(46, 230, 168, 0.12), 0 14px 36px rgba(0, 0, 0, 0.4);
}

.event-card--live:hover {
    border-color: rgba(46, 230, 168, 0.6);
    box-shadow: 0 0 24px rgba(46, 230, 168, 0.18), 0 14px 36px rgba(0, 0, 0, 0.45);
}

/* Category chips are the primary action - keep them comfortably tappable */
.cat-chip {
    padding: 10px 16px;
    min-height: 44px;
    font-size: 0.85rem;
}

.chip-go {
    font-size: 0.6rem;
    opacity: 0.7;
    transition: transform 0.15s ease;
}

.chip:hover .chip-go { transform: translateX(2px); }

.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(46, 230, 168, 0.1);
    border: 1px solid rgba(46, 230, 168, 0.4);
    color: var(--green);
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px rgba(46, 230, 168, 0.8);
    animation: pulse 1.6s infinite;
}

/* --------------------------------------------------------------------------
   Toolbar (search + export)
   -------------------------------------------------------------------------- */

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.search-box {
    position: relative;
    flex: 1 1 280px;
    max-width: 420px;
}

.search-box::before {
    content: '\f002';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--faint);
    font-size: 0.85rem;
    pointer-events: none;
    z-index: 2;
}

.search-box .dt-search { width: 100%; }
.search-box .dt-search label { display: none !important; }

.search-box .dt-search input,
.search-box input {
    width: 100% !important;
    background: var(--panel) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: var(--radius-sm) !important;
    padding: 11px 14px 11px 40px !important;
    font-family: var(--font-body) !important;
    font-size: 0.9rem !important;
    margin: 0 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-box input::placeholder { color: var(--faint); }

.search-box input:focus {
    outline: none !important;
    border-color: var(--cyan) !important;
    box-shadow: 0 0 0 3px var(--cyan-soft) !important;
}

.export-box .dt-buttons {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.dt-button,
.btn-ghost {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    font-family: var(--font-body) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.18s ease !important;
    background: transparent;
}

button.dt-button, div.dt-container .dt-button {
    background: var(--cyan-soft) !important;
    color: var(--cyan-bright) !important;
    border: 1px solid rgba(0, 174, 239, 0.4) !important;
}

button.dt-button:hover, div.dt-container .dt-button:hover {
    background: var(--cyan) !important;
    color: #04122B !important;
    border-color: var(--cyan) !important;
    box-shadow: 0 0 18px var(--cyan-glow) !important;
    transform: translateY(-1px);
}

button.dt-button.buttons-excel {
    background: rgba(46, 230, 168, 0.10) !important;
    color: var(--green) !important;
    border: 1px solid rgba(46, 230, 168, 0.4) !important;
}

button.dt-button.buttons-excel:hover {
    background: var(--green) !important;
    color: #04220F !important;
    border-color: var(--green) !important;
    box-shadow: 0 0 18px rgba(46, 230, 168, 0.35) !important;
}

.btn-ghost {
    background: transparent;
    color: var(--cyan-bright);
    border: 1px solid rgba(0, 174, 239, 0.45);
}

.btn-ghost:hover {
    background: var(--cyan);
    color: #04122B;
    box-shadow: 0 0 18px var(--cyan-glow);
    transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Tip / info card
   -------------------------------------------------------------------------- */

.tip-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--cyan-soft);
    border: 1px solid rgba(0, 174, 239, 0.3);
    border-radius: var(--radius-sm);
    padding: 13px 16px;
    margin-bottom: 16px;
}

.tip-card i.tip-icon { color: var(--cyan-bright); font-size: 1rem; }

.tip-card p { margin: 0; flex: 1; font-size: 0.88rem; color: #BFE8FB; }

.tip-close {
    background: none;
    border: none;
    color: var(--faint);
    cursor: pointer;
    padding: 6px;
    font-size: 0.85rem;
    transition: color 0.15s ease;
}

.tip-close:hover { color: var(--ink); }

/* Visibility helpers for the tip copy */
.tip-desktop { display: inline; }
.tip-mobile  { display: none; }

@media (max-width: 768px) {
    .tip-desktop { display: none; }
    .tip-mobile  { display: inline; }
}

/* --------------------------------------------------------------------------
   Boards (panels)
   -------------------------------------------------------------------------- */

.board {
    background: linear-gradient(180deg, var(--panel), rgba(15, 13, 51, 0.9));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.board + .board { margin-top: 24px; }

/* Side-by-side boards align to the same top edge */
.duo-grid > .board { margin-top: 0; }

.board-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 18px 22px 16px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(90deg, rgba(0, 174, 239, 0.08), transparent 55%);
}

.board-head.alt {
    background: linear-gradient(90deg, rgba(86, 70, 200, 0.16), transparent 55%);
}

.board-head h2,
.board-head h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.board-head h2 i,
.board-head h3 i { color: var(--cyan-bright); font-size: 1rem; }

.board-sub {
    margin: 0;
    font-size: 0.8rem;
    color: var(--faint);
}

.board-body { padding: 20px 22px; }

/* --------------------------------------------------------------------------
   Position badges
   -------------------------------------------------------------------------- */

.position-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 9px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.02rem;
    flex-shrink: 0;
}

.position-default {
    background: var(--cyan-soft);
    color: var(--cyan-bright);
    border: 1px solid rgba(0, 174, 239, 0.35);
}

.position-1 {
    background: linear-gradient(135deg, #FFE08A, #E8A912);
    color: #3D2B00;
    box-shadow: 0 0 16px rgba(255, 201, 60, 0.4);
}

.position-2 {
    background: linear-gradient(135deg, #E8EDF8, #9FA9C4);
    color: #232A3D;
    box-shadow: 0 0 14px rgba(201, 209, 229, 0.3);
}

.position-3 {
    background: linear-gradient(135deg, #F2A567, #B85C1F);
    color: #2E1400;
    box-shadow: 0 0 14px rgba(224, 141, 79, 0.3);
}

.position-dnf {
    background: rgba(255, 93, 115, 0.12);
    color: #FF8B9C;
    border: 1px solid rgba(255, 93, 115, 0.4);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   Tables (DataTables overrides for the dark theme)
   -------------------------------------------------------------------------- */

.table-wrap { overflow-x: auto; }

/* Always-visible horizontally scrolling table (nearby teams) */
.table-scroll { overflow-x: auto; }

/* Runner name cell with avatar */
.runner-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.runner-cell-name { overflow-wrap: anywhere; }

.col-cat { color: var(--faint) !important; }

div.dt-container {
    font-family: var(--font-body);
    color: var(--ink);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

div.dt-container > table { flex: 1 1 100%; }

table.dataTable {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse !important;
    background: transparent !important;
}

table.dataTable thead th {
    background: var(--panel-3) !important;
    color: var(--muted) !important;
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    text-align: left;
    padding: 13px 20px !important;
    border-top: none !important;
    border-bottom: 1px solid var(--line-strong) !important;
}

table.dataTable thead th.dt-orderable-asc:hover,
table.dataTable thead th.dt-orderable-desc:hover {
    color: var(--cyan-bright) !important;
    background: var(--panel-3) !important;
}

table.dataTable thead th span.dt-column-order::before,
table.dataTable thead th span.dt-column-order::after {
    color: var(--cyan-bright);
}

table.dataTable tbody td {
    background: transparent !important;
    color: var(--ink) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 13px 20px !important;
    font-size: 0.92rem;
}

table.dataTable tbody tr {
    background: transparent !important;
    transition: background-color 0.15s ease;
}

table.dataTable tbody tr:hover td {
    background: rgba(0, 174, 239, 0.07) !important;
    box-shadow: none !important;
}

table.dataTable tbody tr:hover .row-go {
    transform: translateX(4px);
    color: var(--cyan-bright);
}

/* Column helpers */
.col-pos   { text-align: center !important; width: 70px; }
.col-num   { text-align: center !important; font-weight: 600; }
.col-time  { text-align: center !important; font-family: var(--font-mono) !important; font-size: 0.88rem !important; color: #C9E8FF !important; }
.col-team  { font-weight: 600; }

th.col-num, th.col-time, th.col-pos { text-align: center !important; }
th.col-time { font-family: var(--font-display) !important; color: var(--muted) !important; }

@media (max-width: 900px) {
    .col-wide { display: none !important; }
}

.team-name { color: var(--ink); font-weight: 600; }

.row-go {
    color: var(--faint);
    font-size: 0.7rem;
    margin-left: 10px;
    display: inline-block;
    transition: transform 0.18s ease, color 0.18s ease;
}

#example tbody tr { cursor: pointer; }

/* Info + paging strip */
div.dt-container div.dt-info {
    padding: 14px 20px;
    font-size: 0.8rem;
    color: var(--faint) !important;
}

div.dt-container div.dt-paging { padding: 10px 14px; }

div.dt-container div.dt-paging button.dt-paging-button {
    background: transparent !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: 8px !important;
    color: var(--muted) !important;
    font-family: var(--font-body) !important;
    font-size: 0.82rem !important;
    min-width: 34px;
    height: 34px;
    margin: 0 2px !important;
    padding: 0 8px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    cursor: pointer;
}

div.dt-container div.dt-paging button.dt-paging-button:hover:not(.disabled) {
    background: var(--cyan-soft) !important;
    border-color: var(--cyan) !important;
    color: var(--cyan-bright) !important;
    box-shadow: none !important;
}

div.dt-container div.dt-paging button.dt-paging-button.current {
    background: var(--cyan) !important;
    border-color: var(--cyan) !important;
    color: #04122B !important;
    font-weight: 700;
    box-shadow: 0 0 14px var(--cyan-glow) !important;
}

div.dt-container div.dt-paging button.dt-paging-button.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Processing overlay */
div.dt-container div.dt-processing {
    background: var(--panel-2) !important;
    color: var(--cyan-bright) !important;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.85rem;
    padding: 10px 22px !important;
}

div.dt-container div.dt-processing > div { display: none; }

/* Legacy DataTables class names (defensive) */
.dataTables_wrapper { font-family: var(--font-body) !important; background: transparent !important; }
.dataTables_info { color: var(--faint) !important; font-size: 0.8rem !important; padding: 14px 20px !important; }

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */

.empty-state {
    text-align: center;
    padding: 64px 24px;
}

.empty-state i {
    font-size: 2.6rem;
    color: var(--faint);
    opacity: 0.7;
    margin-bottom: 16px;
    display: inline-block;
}

.empty-state h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.empty-state p { margin: 0; color: var(--faint); font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   Mobile result cards (leaderboard)
   -------------------------------------------------------------------------- */

.card-stack { padding: 16px; }

.mobile-card {
    position: relative;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--cyan);
    border-radius: var(--radius-sm);
    padding: 16px 44px 16px 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mobile-card:hover,
.mobile-card:active {
    border-color: var(--cyan);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45), 0 0 16px rgba(0, 174, 239, 0.12);
    transform: translateY(-2px);
}

.mobile-card::after {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cyan-bright);
    font-size: 0.8rem;
}

.mobile-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.mobile-card-team {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.03em;
    color: var(--ink);
    min-width: 0;
    overflow-wrap: anywhere;
}

.mobile-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mobile-card-stats .stat {
    background: rgba(7, 6, 26, 0.45);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px 8px;
    text-align: center;
}

.stat-value {
    display: block;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--cyan-bright);
}

.stat-label {
    display: block;
    margin-top: 3px;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
}

/* --------------------------------------------------------------------------
   Team hero (individual page)
   -------------------------------------------------------------------------- */

.team-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        linear-gradient(120deg, rgba(0, 174, 239, 0.12), transparent 50%),
        linear-gradient(180deg, var(--panel), var(--panel-3));
    padding: 36px 30px;
    margin-bottom: 20px;
    text-align: center;
}

.team-hero::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 180px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
}

.team-hero-kicker {
    margin: 0 0 10px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cyan-bright);
}

.team-hero-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2rem, 6vw, 3.4rem);
    line-height: 1.02;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Stat tiles
   -------------------------------------------------------------------------- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

@media (max-width: 820px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

.stat-tile {
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 14px 16px;
    text-align: center;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.stat-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 174, 239, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.stat-tile .stat-value {
    font-size: 1.6rem;
    letter-spacing: -0.01em;
}

.stat-tile .stat-label { margin-top: 7px; font-size: 0.68rem; }

.stat-tile.is-green .stat-value { color: var(--green); }

/* --------------------------------------------------------------------------
   Two-column boards (individual page)
   -------------------------------------------------------------------------- */

.duo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    margin-bottom: 24px;
}

@media (max-width: 1024px) {
    .duo-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Runner filter chips
   -------------------------------------------------------------------------- */

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--panel-2);
    color: var(--muted);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 6px 14px 6px 7px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.16s ease;
}

.chip.chip-all { padding-left: 14px; }

.chip:hover {
    border-color: var(--cyan);
    color: var(--cyan-bright);
}

.chip.is-active {
    background: var(--cyan);
    border-color: var(--cyan);
    color: #04122B;
    box-shadow: 0 0 14px var(--cyan-glow);
}

.chip-count {
    background: rgba(7, 6, 26, 0.35);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 0.7rem;
    font-family: var(--font-mono);
}

.chip.is-active .chip-count { background: rgba(255, 255, 255, 0.3); }

/* --------------------------------------------------------------------------
   Runner avatars & summary cards
   -------------------------------------------------------------------------- */

.runner-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.runner-avatar.av-sm { width: 26px; height: 26px; font-size: 0.62rem; }
.runner-avatar.av-md { width: 34px; height: 34px; font-size: 0.72rem; }
.runner-avatar.av-lg { width: 48px; height: 48px; font-size: 1rem; }

.runner-avatar-1  { background: linear-gradient(135deg, #667eea, #764ba2); }
.runner-avatar-2  { background: linear-gradient(135deg, #f093fb, #f5576c); }
.runner-avatar-3  { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.runner-avatar-4  { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.runner-avatar-5  { background: linear-gradient(135deg, #fa709a, #fee140); }
.runner-avatar-6  { background: linear-gradient(135deg, #30cfd0, #5e72e4); }
.runner-avatar-7  { background: linear-gradient(135deg, #ff9a9e, #c44569); }
.runner-avatar-8  { background: linear-gradient(135deg, #f6ad55, #dd6b20); }
.runner-avatar-9  { background: linear-gradient(135deg, #a18cd1, #6a5acd); }
.runner-avatar-10 { background: linear-gradient(135deg, #f687b3, #b83280); }
.runner-avatar-11 { background: linear-gradient(135deg, #68d391, #2f855a); }
.runner-avatar-12 { background: linear-gradient(135deg, #63b3ed, #2b6cb0); }
.runner-avatar-13 { background: linear-gradient(135deg, #fdbb2d, #22c1c3); }
.runner-avatar-14 { background: linear-gradient(135deg, #e056fd, #8e44ad); }
.runner-avatar-15 { background: linear-gradient(135deg, #76e4f7, #0987a0); }

.runner-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px 22px;
}

@media (min-width: 1280px) {
    .runner-cards { grid-template-columns: 1fr 1fr; }
}

.runner-card {
    position: relative;
    overflow: hidden;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 18px 16px 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.runner-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.runner-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.runner-card-1::before  { background: linear-gradient(135deg, #667eea, #764ba2); }
.runner-card-2::before  { background: linear-gradient(135deg, #f093fb, #f5576c); }
.runner-card-3::before  { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.runner-card-4::before  { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.runner-card-5::before  { background: linear-gradient(135deg, #fa709a, #fee140); }
.runner-card-6::before  { background: linear-gradient(135deg, #30cfd0, #5e72e4); }
.runner-card-7::before  { background: linear-gradient(135deg, #ff9a9e, #c44569); }
.runner-card-8::before  { background: linear-gradient(135deg, #f6ad55, #dd6b20); }
.runner-card-9::before  { background: linear-gradient(135deg, #a18cd1, #6a5acd); }
.runner-card-10::before { background: linear-gradient(135deg, #f687b3, #b83280); }
.runner-card-11::before { background: linear-gradient(135deg, #68d391, #2f855a); }
.runner-card-12::before { background: linear-gradient(135deg, #63b3ed, #2b6cb0); }
.runner-card-13::before { background: linear-gradient(135deg, #fdbb2d, #22c1c3); }
.runner-card-14::before { background: linear-gradient(135deg, #e056fd, #8e44ad); }
.runner-card-15::before { background: linear-gradient(135deg, #76e4f7, #0987a0); }

.runner-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.runner-card-head h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.03em;
    min-width: 0;
    overflow-wrap: anywhere;
}

.runner-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mini-stat {
    background: rgba(7, 6, 26, 0.45);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px 8px;
    text-align: center;
}

.mini-stat .stat-value { font-size: 1.05rem; }
.mini-stat.is-green .stat-value { color: var(--green); }

/* --------------------------------------------------------------------------
   Mobile lap cards (individual page)
   -------------------------------------------------------------------------- */

.mobile-lap-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 10px;
}

.lap-pill {
    background: var(--cyan-soft);
    border: 1px solid rgba(0, 174, 239, 0.35);
    color: var(--cyan-bright);
    border-radius: 999px;
    padding: 3px 11px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
    flex-shrink: 0;
}

.mobile-lap-name {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.lap-time {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--cyan-bright);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Nearby teams highlight
   -------------------------------------------------------------------------- */

.nearby-team-current td {
    background: rgba(255, 201, 60, 0.08) !important;
    border-bottom-color: rgba(255, 201, 60, 0.35) !important;
}

.nearby-team-current td:first-child {
    box-shadow: inset 3px 0 0 var(--gold);
}

.nearby-team-current:hover td {
    background: rgba(255, 201, 60, 0.13) !important;
}

.you-tag {
    display: inline-block;
    margin-left: 10px;
    background: rgba(255, 201, 60, 0.15);
    border: 1px solid rgba(255, 201, 60, 0.45);
    color: var(--gold);
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Alerts, spinner, toast
   -------------------------------------------------------------------------- */

.alert {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: var(--radius-sm);
    padding: 13px 16px;
    margin-bottom: 18px;
    font-size: 0.88rem;
    font-weight: 500;
}

.alert-info {
    background: var(--cyan-soft);
    border: 1px solid rgba(0, 174, 239, 0.3);
    color: #BFE8FB;
}

.alert-warn {
    background: rgba(255, 201, 60, 0.1);
    border: 1px solid rgba(255, 201, 60, 0.35);
    color: #FFE3A1;
}

.alert-error {
    background: rgba(255, 93, 115, 0.1);
    border: 1px solid rgba(255, 93, 115, 0.35);
    color: #FFB6C1;
}

.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(69, 200, 255, 0.25);
    border-top-color: var(--cyan-bright);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}

.toast {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--panel-2);
    border: 1px solid rgba(46, 230, 168, 0.45);
    color: var(--green);
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 0.82rem;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.25s ease-out;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
    border-top: 1px solid var(--line);
    padding: 26px 20px 34px;
    text-align: center;
    color: var(--faint);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
}

.site-footer strong {
    color: var(--muted);
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Responsive: table vs cards
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .table-wrap { display: none; }

    .hero { padding: 32px 22px 36px; }
    .hero::after { font-size: 8rem; right: -8px; }

    .header-row { gap: 12px; }
    .brand-badge img { height: 30px; }
    .brand-title { font-size: 1.2rem; }

    .board-body { padding: 16px; }
    .runner-cards { padding: 16px; }
}