<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <meta name="theme-color" content="#0a0a0c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="Sectorly">
    <meta name="description" content="Strategy Simplified.">
    <title>Sectorly</title>
    <link rel="manifest" href="/static/manifest.json">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap"
        rel="stylesheet">
    <style>
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        :root {
            --bg: #0a0a0c;
            --surface: #111115;
            --surface2: #18181e;
            --border: rgba(255, 255, 255, 0.06);
            --border2: rgba(255, 255, 255, 0.10);
            --text: #ffffff;
            --text2: rgba(255, 255, 255, 0.55);
            --text3: rgba(255, 255, 255, 0.25);
            --gtp: #ffffff;
            --gtd: #00a94f;
            --gtdpro: #e31937;
            --lmp2: #5b9bd5;
            --yellow: #ffd600;
            --red: #ff1744;
            --font: 'Outfit', sans-serif;
            --safe-top: env(safe-area-inset-top, 0px);
            --safe-bot: env(safe-area-inset-bottom, 0px);
        }

        html,
        body {
            background: var(--bg);
            color: var(--text);
            font-family: var(--font);
            min-height: 100dvh;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        /* ── HEADER ── */
        #header {
            position: sticky;
            top: 0;
            z-index: 100;
            background: rgba(10, 10, 12, 0.85);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border);
            padding: calc(var(--safe-top) + 12px) 16px 0;
        }

        #header-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }

        #wordmark {
            font-size: 22px;
            font-weight: 800;
            letter-spacing: -0.5px;
            color: var(--text);
        }

        #wordmark span {
            color: var(--yellow);
        }

        #header-meta {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        #pulse {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--gtd);
            opacity: 0;
            transition: opacity 0.3s;
        }

        #pulse.active {
            opacity: 1;
            animation: pulse 1s ease-out forwards;
        }

        @keyframes pulse {
            0% {
                opacity: 1;
                transform: scale(1);
            }

            100% {
                opacity: 0;
                transform: scale(2.5);
            }
        }

        #session-badge {
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--text3);
            display: none;
        }

        #flag-badge {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            padding: 3px 8px;
            border-radius: 4px;
            display: none;
        }

        #flag-badge.green {
            background: rgba(0, 230, 118, 0.15);
            color: var(--gtd);
        }

        #flag-badge.yellow {
            background: rgba(255, 214, 0, 0.15);
            color: var(--yellow);
        }

        #flag-badge.red {
            background: rgba(255, 23, 68, 0.15);
            color: var(--red);
        }

        #flag-badge.checker {
            background: rgba(255, 255, 255, 0.1);
            color: var(--text);
        }

        #time-remaining {
            font-size: 13px;
            font-weight: 700;
            color: var(--text2);
            font-variant-numeric: tabular-nums;
            display: none;
        }

        /* ── VIEW MODE TABS ── */
        #view-tabs {
            display: flex;
            gap: 4px;
            margin-bottom: 12px;
        }

        .view-tab {
            flex: 1;
            padding: 7px 4px;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: transparent;
            color: var(--text3);
            font-family: var(--font);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.03em;
            cursor: pointer;
            transition: all 0.2s;
            text-align: center;
        }

        .view-tab.active {
            background: var(--surface2);
            border-color: var(--border2);
            color: var(--text);
        }

        /* ── CLASS FILTER TABS ── */
        #class-tabs {
            display: flex;
            gap: 6px;
            overflow-x: auto;
            scrollbar-width: none;
            padding-bottom: 12px;
        }

        #class-tabs::-webkit-scrollbar {
            display: none;
        }

        .class-tab {
            flex-shrink: 0;
            padding: 5px 12px;
            border-radius: 20px;
            border: 1px solid var(--border);
            background: transparent;
            color: var(--text3);
            font-family: var(--font);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }

        .class-tab.active-all {
            border-color: rgba(255, 255, 255, 0.2);
            color: var(--text);
            background: var(--surface2);
        }

        .class-tab.active-GTP {
            border-color: var(--gtp);
            color: var(--gtp);
            background: rgba(41, 121, 255, 0.1);
        }

        .class-tab.active-GTDPRO {
            border-color: var(--gtdpro);
            color: var(--gtdpro);
            background: rgba(213, 0, 249, 0.1);
        }

        .class-tab.active-GTD {
            border-color: var(--gtd);
            color: var(--gtd);
            background: rgba(0, 230, 118, 0.1);
        }

        .class-tab.active-LMP2 {
            border-color: var(--lmp2);
            color: var(--lmp2);
            background: rgba(255, 109, 0, 0.1);
        }

        /* ── MAIN CONTENT ── */
        #content {
            padding: 12px 12px calc(var(--safe-bot) + 24px);
            max-width: 600px;
            margin: 0 auto;
        }

        /* ── OFF-WEEKEND SCREEN ── */
        #off-weekend {
            display: none;
            padding: 32px 0;
        }

        #ow-event-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--text3);
            margin-bottom: 8px;
        }

        #ow-event-name {
            font-size: 28px;
            font-weight: 800;
            line-height: 1.1;
            letter-spacing: -0.5px;
            margin-bottom: 4px;
        }

        #ow-track {
            font-size: 15px;
            font-weight: 500;
            color: var(--text2);
            margin-bottom: 32px;
        }

        #countdown-block {
            display: flex;
            gap: 12px;
            margin-bottom: 32px;
        }

        .countdown-unit {
            flex: 1;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 16px 8px;
            text-align: center;
        }

        .countdown-number {
            font-size: 36px;
            font-weight: 800;
            letter-spacing: -1px;
            font-variant-numeric: tabular-nums;
            line-height: 1;
            margin-bottom: 4px;
        }

        .countdown-label {
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--text3);
        }

        #ow-next-session {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 16px;
        }

        #ow-next-label {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--text3);
            margin-bottom: 6px;
        }

        #ow-next-name {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 2px;
        }

        #ow-next-time {
            font-size: 13px;
            color: var(--text2);
        }

        /* ── FOLLOWED CAR ── */
        #followed-car {
            display: none;
            background: var(--surface);
            border: 1px solid rgba(255, 214, 0, 0.25);
            border-radius: 14px;
            padding: 14px;
            margin-bottom: 10px;
            position: relative;
            overflow: hidden;
        }

        #followed-car::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--yellow);
        }

        #fc-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }

        #fc-pin-label {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--yellow);
            opacity: 0.7;
        }

        #fc-unfollow {
            margin-left: auto;
            background: transparent;
            border: none;
            color: var(--text3);
            font-family: var(--font);
            font-size: 12px;
            cursor: pointer;
            padding: 4px 8px;
        }

        #fc-main {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        #fc-pos {
            font-size: 32px;
            font-weight: 900;
            letter-spacing: -1px;
            line-height: 1;
            min-width: 36px;
        }

        #fc-car-num {
            font-size: 22px;
            font-weight: 800;
            line-height: 1;
        }

        #fc-info {
            flex: 1;
        }

        #fc-driver {
            font-size: 15px;
            font-weight: 700;
            margin-bottom: 2px;
        }

        #fc-vehicle {
            font-size: 12px;
            color: var(--text2);
        }

        #fc-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid var(--border);
        }

        .fc-stat {
            text-align: center;
        }

        .fc-stat-val {
            font-size: 16px;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
        }

        .fc-stat-lbl {
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--text3);
            margin-top: 2px;
        }

        /* ── LEADERBOARD ── */
        #leaderboard {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        /* Class divider */
        .class-divider {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 0 4px;
        }

        .class-divider-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .class-divider-name {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .class-divider-line {
            flex: 1;
            height: 1px;
            background: var(--border);
        }

        /* Car row */
        .car-row {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 11px 12px;
            cursor: pointer;
            transition: border-color 0.2s, background 0.2s;
            position: relative;
            overflow: hidden;
        }

        .car-row:active {
            background: var(--surface2);
        }

        .car-row.followed {
            border-color: rgba(255, 214, 0, 0.2);
        }

        .car-row.in-pit {
            opacity: 0.6;
        }

        .car-row-left-accent {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
        }

        /* Essentials layout */
        .car-essentials {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .car-pos {
            font-size: 18px;
            font-weight: 800;
            min-width: 28px;
            color: var(--text2);
            font-variant-numeric: tabular-nums;
        }

        .car-pos.p1 {
            color: var(--text);
        }

        .car-num {
            font-size: 15px;
            font-weight: 800;
            min-width: 32px;
        }

        .car-main {
            flex: 1;
            min-width: 0;
        }

        .car-driver {
            font-size: 14px;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 1px;
        }

        .car-vehicle {
            font-size: 11px;
            color: var(--text3);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .car-right {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 2px;
        }

        .car-gap {
            font-size: 13px;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            color: var(--text2);
        }

        .car-gap.leader {
            color: var(--text3);
            font-size: 11px;
        }

        .car-last-lap {
            font-size: 11px;
            font-variant-numeric: tabular-nums;
            color: var(--text3);
        }

        .pit-badge {
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            background: rgba(255, 255, 255, 0.08);
            color: var(--text2);
            padding: 2px 5px;
            border-radius: 3px;
        }

        /* Strategy extra row */
        .car-strategy {
            display: flex;
            gap: 16px;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid var(--border);
        }

        .strat-item {
            display: flex;
            flex-direction: column;
            gap: 1px;
        }

        .strat-val {
            font-size: 13px;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
        }

        .strat-lbl {
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--text3);
        }

        .pace-chip {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.04em;
            padding: 2px 6px;
            border-radius: 4px;
            align-self: center;
            margin-left: auto;
        }

        .pace-chip.charging {
            background: rgba(0, 230, 118, 0.15);
            color: var(--gtd);
        }

        .pace-chip.fading {
            background: rgba(255, 23, 68, 0.15);
            color: var(--red);
        }

        .pace-chip.steady {
            background: rgba(255, 255, 255, 0.07);
            color: var(--text3);
        }

        /* Expert extra row */
        .car-expert {
            display: flex;
            gap: 12px;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid var(--border);
            flex-wrap: wrap;
        }

        .expert-item {
            display: flex;
            flex-direction: column;
            gap: 1px;
            min-width: 60px;
        }

        .expert-val {
            font-size: 12px;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
        }

        .expert-lbl {
            font-size: 9px;
            font-weight: 600;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            color: var(--text3);
        }

        /* ── LOADING / EMPTY STATES ── */
        #loading-state {
            text-align: center;
            padding: 60px 20px;
            color: var(--text3);
        }

        #loading-state .spinner {
            width: 24px;
            height: 24px;
            border: 2px solid var(--border2);
            border-top-color: var(--text2);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin: 0 auto 16px;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        #loading-state p {
            font-size: 14px;
            font-weight: 500;
        }

        #empty-state {
            display: none;
            text-align: center;
            padding: 60px 20px;
            color: var(--text3);
            font-size: 14px;
        }

        /* ── LAST UPDATED ── */
        #last-updated {
            text-align: center;
            font-size: 11px;
            color: var(--text3);
            padding: 16px 0 4px;
            display: none;
        }

        /* ── COUNTDOWN UNITS (large - off weekend) ── */
        .cd-unit {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 72px;
        }

        .cd-num {
            font-size: 48px;
            font-weight: 900;
            letter-spacing: -2px;
            line-height: 1;
            font-variant-numeric: tabular-nums;
            margin-bottom: 4px;
        }

        .cd-lbl {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--text3);
        }

        .cd-sep {
            font-size: 36px;
            font-weight: 300;
            color: var(--text3);
            align-self: flex-start;
            padding-top: 4px;
            user-select: none;
        }

        /* ── COUNTDOWN UNITS (compact - race week) ── */
        .cd-unit-compact {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 12px 16px;
        }

        .cd-num-sm {
            font-size: 28px;
            font-weight: 800;
            letter-spacing: -1px;
            line-height: 1;
            font-variant-numeric: tabular-nums;
            margin-bottom: 3px;
        }

        .cd-lbl-sm {
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--text3);
        }

        .cd-sep-compact {
            font-size: 20px;
            font-weight: 300;
            color: var(--text3);
            align-self: center;
            user-select: none;
        }

        /* ── CLASS CHIP ── */
        .class-chip {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.05em;
            padding: 4px 10px;
            border-radius: 20px;
            border: 1px solid;
        }

        /* ── CIRCUIT STATS ── */
        .circuit-stat {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 14px 10px;
            text-align: center;
        }

        .circuit-stat-val {
            font-size: 18px;
            font-weight: 800;
            letter-spacing: -0.5px;
            margin-bottom: 4px;
            font-variant-numeric: tabular-nums;
        }

        .circuit-stat-lbl {
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            color: var(--text3);
        }

        /* ── SESSION SCHEDULE ROW ── */
        .session-row {
            display: flex;
            align-items: center;
            padding: 11px 16px;
            gap: 12px;
            border-bottom: 1px solid var(--border);
        }

        .session-row:last-child {
            border-bottom: none;
        }

        .session-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .session-name {
            font-size: 13px;
            font-weight: 600;
            flex: 1;
        }

        .session-time {
            font-size: 12px;
            color: var(--text2);
            font-variant-numeric: tabular-nums;
        }

        .session-row.upcoming .session-name {
            color: var(--text);
        }

        .session-row.past .session-name {
            color: var(--text3);
        }

        .session-row.past .session-time {
            color: var(--text3);
        }

        /* ── SEASON STRIP ── */
        .season-round {
            display: flex;
            align-items: center;
            padding: 12px 14px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            gap: 12px;
        }

        .season-round.completed {
            opacity: 0.4;
        }

        .season-round.next {
            border-color: var(--yellow);
            background: rgba(255, 214, 0, 0.04);
        }

        .season-round-num {
            font-size: 11px;
            font-weight: 700;
            color: var(--text3);
            min-width: 24px;
        }

        .season-round.next .season-round-num {
            color: var(--yellow);
        }

        .season-round-info {
            flex: 1;
            min-width: 0;
        }

        .season-round-name {
            font-size: 14px;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 2px;
        }

        .season-round-date {
            font-size: 11px;
            color: var(--text3);
            margin-bottom: 4px;
        }

        .season-round-classes {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
        }

        .season-class-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
        }

        .season-round-checkmark {
            font-size: 12px;
            color: var(--text3);
        }

        /* ── POSITION CHANGE ANIMATIONS ── */
        .car-row {
            transition: background 0.3s ease;
        }

        .pos-change {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            font-size: 10px;
            font-weight: 700;
            padding: 1px 5px;
            border-radius: 4px;
            margin-left: 4px;
            opacity: 0;
            animation: pos-fade 2.5s ease forwards;
        }

        .pos-up {
            color: var(--gtd);
            background: rgba(0, 230, 118, 0.12);
        }

        .pos-down {
            color: var(--red);
            background: rgba(255, 23, 68, 0.12);
        }

        @keyframes pos-fade {
            0% {
                opacity: 1;
                transform: translateY(0);
            }

            60% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes row-flash-up {
            0% {
                background: rgba(0, 230, 118, 0.08);
            }

            100% {
                background: var(--surface);
            }
        }

        @keyframes row-flash-down {
            0% {
                background: rgba(255, 23, 68, 0.08);
            }

            100% {
                background: var(--surface);
            }
        }

        .flash-up {
            animation: row-flash-up 1.5s ease forwards;
        }

        .flash-down {
            animation: row-flash-down 1.5s ease forwards;
        }
    </style>
</head>

<body>

    <div id="header">
        <div id="header-top">
            <div id="wordmark">Sector<span>ly</span></div>
            <div id="header-meta">
                <div id="pulse"></div>
                <div id="flag-badge"></div>
                <div id="time-remaining"></div>
            </div>
        </div>
        <div id="session-badge"></div>

        <div id="view-tabs">
            <button class="view-tab active" data-view="essentials">Essentials</button>
            <button class="view-tab" data-view="strategy">Strategy</button>
            <button class="view-tab" data-view="expert">Expert</button>
        </div>

        <div id="class-tabs">
            <button class="class-tab active-all" data-class="ALL">All</button>
            <button class="class-tab" data-class="GTP">GTP</button>
            <button class="class-tab" data-class="GTD PRO">GTD Pro</button>
            <button class="class-tab" data-class="GTD">GTD</button>
            <button class="class-tab" data-class="LMP2">LMP2</button>
        </div>
    </div>

    <div id="content">

        <!-- ═══════════════════════════════════════════
     OFF-WEEKEND STATE (>7 days to next race)
     ═══════════════════════════════════════════ -->
        <div id="off-weekend" style="display:none;">

            <!-- Hero -->
            <div id="ow-hero" style="
    padding: 48px 0 32px;
    text-align: center;
  ">
                <div id="ow-round-label" style="
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text3);
      margin-bottom: 10px;
    ">Next Race</div>

                <div id="ow-event-name" style="
      font-size: 32px;
      font-weight: 900;
      letter-spacing: -0.8px;
      line-height: 1.05;
      margin-bottom: 6px;
    ">—</div>

                <div id="ow-track" style="
      font-size: 14px;
      font-weight: 500;
      color: var(--text2);
      margin-bottom: 8px;
    ">—</div>

                <div id="ow-location" style="
      font-size: 12px;
      color: var(--text3);
      margin-bottom: 36px;
    ">—</div>

                <!-- Countdown -->
                <div id="countdown-block" style="
      display: flex;
      gap: 8px;
      justify-content: center;
      margin-bottom: 12px;
    ">
                    <div class="cd-unit">
                        <div class="cd-num" id="cd-days">—</div>
                        <div class="cd-lbl">Days</div>
                    </div>
                    <div class="cd-sep">:</div>
                    <div class="cd-unit">
                        <div class="cd-num" id="cd-hours">—</div>
                        <div class="cd-lbl">Hrs</div>
                    </div>
                    <div class="cd-sep">:</div>
                    <div class="cd-unit">
                        <div class="cd-num" id="cd-mins">—</div>
                        <div class="cd-lbl">Mins</div>
                    </div>
                    <div class="cd-sep">:</div>
                    <div class="cd-unit">
                        <div class="cd-num" id="cd-secs">—</div>
                        <div class="cd-lbl">Secs</div>
                    </div>
                </div>

                <div id="ow-race-time" style="
      font-size: 12px;
      color: var(--text3);
      margin-bottom: 0;
    ">—</div>
            </div>

            <!-- Classes competing -->
            <div id="ow-classes" style="
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 32px;
  "></div>

            <!-- Did You Know -->
            <div id="dyk-card" style="
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 24px;
  ">
                <div style="
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text3);
      margin-bottom: 10px;
    ">Did You Know?</div>
                <div id="dyk-text" style="
      font-size: 15px;
      font-weight: 500;
      line-height: 1.65;
      color: var(--text2);
      transition: opacity 0.3s ease;
    "></div>
            </div>

            <!-- Season strip -->
            <div style="margin-bottom: 8px;">
                <div style="
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text3);
      margin-bottom: 12px;
    ">2026 Season</div>
                <div id="season-strip" style="
      display: flex;
      flex-direction: column;
      gap: 6px;
    "></div>
            </div>

        </div>


        <!-- ═══════════════════════════════════════════
     RACE WEEK STATE (≤7 days to next race)
     ═══════════════════════════════════════════ -->
        <div id="race-week" style="display:none;">

            <!-- Hero -->
            <div style="padding: 36px 0 24px; text-align: center;">
                <div id="rw-round-label" style="
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--yellow);
      margin-bottom: 10px;
    ">Race Week</div>

                <div id="rw-event-name" style="
      font-size: 28px;
      font-weight: 900;
      letter-spacing: -0.5px;
      line-height: 1.1;
      margin-bottom: 4px;
    ">—</div>

                <div id="rw-track" style="
      font-size: 14px;
      color: var(--text2);
      margin-bottom: 4px;
    ">—</div>

                <div id="rw-location" style="
      font-size: 12px;
      color: var(--text3);
      margin-bottom: 24px;
    ">—</div>

                <!-- Compact countdown -->
                <div style="
      display: inline-flex;
      gap: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 0;
    ">
                    <div class="cd-unit-compact">
                        <div class="cd-num-sm" id="rw-cd-days">—</div>
                        <div class="cd-lbl-sm">Days</div>
                    </div>
                    <div class="cd-sep-compact">:</div>
                    <div class="cd-unit-compact">
                        <div class="cd-num-sm" id="rw-cd-hours">—</div>
                        <div class="cd-lbl-sm">Hrs</div>
                    </div>
                    <div class="cd-sep-compact">:</div>
                    <div class="cd-unit-compact">
                        <div class="cd-num-sm" id="rw-cd-mins">—</div>
                        <div class="cd-lbl-sm">Mins</div>
                    </div>
                    <div class="cd-sep-compact">:</div>
                    <div class="cd-unit-compact">
                        <div class="cd-num-sm" id="rw-cd-secs">—</div>
                        <div class="cd-lbl-sm">Secs</div>
                    </div>
                </div>
            </div>

            <!-- Track map -->
            <div style="
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 10px;
    text-align: center;
  ">
                <div style="
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text3);
      margin-bottom: 16px;
      text-align: left;
    ">Circuit</div>
                <div id="track-map-container" style="
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 200px;
    ">
                    <!-- SVG track map injected by JS based on current round -->
                    <div style="color: var(--text3); font-size: 13px;">Track map coming soon</div>
                </div>
            </div>

            <!-- Circuit stats -->
            <div style="
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 10px;
  ">
                <div class="circuit-stat">
                    <div class="circuit-stat-val" id="cs-length">—</div>
                    <div class="circuit-stat-lbl">Track Length</div>
                </div>
                <div class="circuit-stat">
                    <div class="circuit-stat-val" id="cs-turns">—</div>
                    <div class="circuit-stat-lbl">Turns</div>
                </div>
                <div class="circuit-stat">
                    <div class="circuit-stat-val" id="cs-duration">—</div>
                    <div class="circuit-stat-lbl">Race Duration</div>
                </div>
            </div>

            <!-- Classes competing -->
            <div id="rw-classes" style="
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
  "></div>

            <!-- Session schedule -->
            <div style="
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 10px;
  ">
                <div style="
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text3);
      padding: 16px 16px 12px;
      border-bottom: 1px solid var(--border);
    ">Weekend Schedule</div>
                <div id="session-schedule" style="padding: 8px 0;"></div>
            </div>

            <!-- Did You Know -->
            <div style="
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 24px;
  ">
                <div style="
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text3);
      margin-bottom: 10px;
    ">Did You Know?</div>
                <div id="dyk-text"
                    style="font-size: 15px; font-weight: 500; line-height: 1.65; color: var(--text2); transition: opacity 0.3s ease; min-height: 80px;">
                </div>
                font-size: 15px;
                font-weight: 500;
                line-height: 1.65;
                color: var(--text2);
                transition: opacity 0.3s ease;
                ">
            </div>
        </div>

    </div>

    <!-- Followed car -->
    <div id="followed-car">
        <div id="fc-header">
            <div id="fc-pin-label">Following</div>
            <button id="fc-unfollow">Unfollow</button>
        </div>
        <div id="fc-main">
            <div id="fc-pos">—</div>
            <div>
                <div id="fc-car-num">—</div>
            </div>
            <div id="fc-info">
                <div id="fc-driver">—</div>
                <div id="fc-vehicle">—</div>
            </div>
        </div>
        <div id="fc-stats">
            <div class="fc-stat">
                <div class="fc-stat-val" id="fc-gap">—</div>
                <div class="fc-stat-lbl">Gap</div>
            </div>
            <div class="fc-stat">
                <div class="fc-stat-val" id="fc-last-lap">—</div>
                <div class="fc-stat-lbl">Last Lap</div>
            </div>
            <div class="fc-stat">
                <div class="fc-stat-val" id="fc-best-lap">—</div>
                <div class="fc-stat-lbl">Best Lap</div>
            </div>
        </div>
    </div>

    <!-- Loading state -->
    <div id="loading-state">
        <div class="spinner"></div>
        <p>Connecting to timing feed…</p>
    </div>

    <!-- Empty state -->
    <div id="empty-state">No cars found for this filter.</div>

    <!-- Leaderboard -->
    <div id="leaderboard"></div>

    <!-- Last updated -->
    <div id="last-updated"></div>

    <!-- Footer -->
    <div style="
  padding: 24px 0 8px;
  border-top: 1px solid var(--border);
  margin-top: 16px;
">
        <p style="
    font-size: 11px;
    color: var(--text3);
    line-height: 1.6;
    text-align: center;
    margin-bottom: 12px;
  ">
            Sectorly is an independent app, not affiliated with or endorsed by IMSA.
            Race data is presented as original analysis for informational purposes only.
        </p>
        <div style="
    display: flex;
    justify-content: center;
    gap: 20px;
  ">
            <a href="/privacy" style="
      font-size: 11px;
      font-weight: 600;
      color: var(--text3);
      text-decoration: none;
    ">Privacy Policy</a>
            <a href="/terms" style="
      font-size: 11px;
      font-weight: 600;
      color: var(--text3);
      text-decoration: none;
    ">Terms of Service</a>
        </div>
    </div>

    </div>

    <script>

        // ── ACCESS CONTROL ──
        // Must match the tokens in gate.html
        const VALID_TOKENS = [
            'purple',
            'greenFlag',
            'pitlane',
            'sector1',
        ];

        (function checkAccess() {
            // Check if arriving via an invite link: sectorly.app/invite/purple
            const path = window.location.pathname;
            if (path.startsWith('/invite/')) {
                const token = path.replace('/invite/', '').toLowerCase().trim();
                if (VALID_TOKENS.includes(token)) {
                    localStorage.setItem('sectorly_token', token);
                    // Clean the URL so the token isn't visible in the address bar
                    window.history.replaceState({}, '', '/');
                } else {
                    window.location.href = '/gate';
                }
            }

            // Check stored token
            const stored = localStorage.getItem('sectorly_token');
            if (!stored || !VALID_TOKENS.includes(stored)) {
                window.location.href = '/gate';
            }
        })();

        // Did you know?
        const DID_YOU_KNOW = [
            "GTP prototypes produce around 680 horsepower from a hybrid powertrain — combining a turbocharged combustion engine with an electric motor.",
            "The 12 Hours of Sebring is North America's oldest sports car endurance race, first held in 1952 on a former World War II airfield. Parts of that original concrete surface are still raced on today.",
            "Winning drivers at the Rolex 24 at Daytona receive an actual Rolex watch — a tradition that dates back to 1964 when chronographs were considered essential tools for racing drivers.",
            "Porsche has recorded over 600 wins in IMSA competition — more than any other manufacturer in the series' history.",
            "The Rolex 24, 12 Hours of Sebring, and Petit Le Mans form an informal 'Triple Crown' of North American endurance racing.",
            "IMSA was founded in 1969, but the roots of the WeatherTech Championship trace back to the IMSA GT Championship, which first ran in 1971.",
            "The current GTP class was named as a tribute to the original GTP class from the 1980s IMSA GT Championship — one of the most iconic eras in American sports car racing.",
            "GTP cars can legally compete in both IMSA and the FIA World Endurance Championship, including the 24 Hours of Le Mans, using the same basic platform.",
            "The first hybrid car to ever win the Rolex 24 at Daytona did so in 2023 — an Acura ARX-06 GTP in the inaugural season of the GTP class.",
            "Sebring International Raceway is so notoriously bumpy and demanding that many drivers say a 12-hour race there is more grueling than a 24-hour race at Le Mans or Daytona.",
            "The 2014 merger of the American Le Mans Series and the Rolex Sports Car Series created the unified championship that eventually became the IMSA WeatherTech SportsCar Championship.",
            "GT Daytona (GTD) cars are based on road-going production models built to FIA GT3 specification — meaning a car you can buy at a dealership is the starting point for a race car.",
            "Multi-class racing means multiple championships are decided simultaneously in the same race — GTP, LMP2, GTD Pro, and GTD cars all race together on track at the same time.",
            "IMSA uses a Leader Light System — LED panels on the side of each car display the car's position within its class, making it easier for fans trackside to follow the action.",
            "The Petit Le Mans at Road Atlanta has seen record-setting attendance in recent years, closing out the season each October at one of America's most beloved road courses.",
            "In endurance races, teams typically rotate between three to five drivers — managing driver stamina and mandatory minimum drive times is as strategic as fuel and tire decisions.",
            "Amateur drivers — called Silver or Bronze rated drivers — are required to complete a minimum number of hours in LMP2 and GTD class cars during endurance races.",
            "In 2011, the pace car at the Rolex 24 had to stop for fuel during a fog delay — the race was paused so long that the safety car ran out of gas.",
            "The 12 Hours of Sebring track still uses sections of the original 1950s runway concrete from Hendricks Army Airfield, giving it one of the most unique and punishing surfaces in motorsport.",
            "Juan Manuel Fangio — five-time Formula 1 World Champion — raced at Sebring in the 1950s. The 1957 Sebring 12 Hours was the only American race he ever won.",
            "WeatherTech has been the title sponsor of the championship since 2016 — the same WeatherTech that makes the floor mats you might have in your car.",
            "LMP2 cars all use the same Gibson GK428 V8 engine — a spec formula designed to keep competition close and costs controlled for teams in that class.",
            "PJ Hyett — co-founder of GitHub — won the 2025 IMSA LMP2 championship with AO Racing, driving the #99 Oreca alongside co-driver Dane Cameron.",
            "The Motul Petit Le Mans at Road Atlanta awards championship points at four, eight, and ten hours into the race — making strategy and consistency across the full distance critical.",
            "GTP cars can recover energy under braking and deploy it as extra power on acceleration — teams manage this energy budget lap by lap as part of their race strategy.",
        ];

        // Full event name lookup — keyed by the short name IMSA sends in the feed
        const EVENT_NAMES = {
            'Long Beach': 'Acura Grand Prix of Long Beach',
            'Sebring': 'Mobil 1 Twelve Hours of Sebring',
            'Mid-Ohio': 'Acura Grand Prix at Mid-Ohio',
            'Watkins Glen': 'Sahlen\'s Six Hours at The Glen',
            'Road America': 'IMSA WeatherTech Championship at Road America',
            'VIR': 'Michelin GT Challenge at VIR',
            'Laguna Seca': 'Hyundai Monterey Sports Car Championship',
            'Indianapolis': 'Chevrolet Grand Prix at Indianapolis',
            'Road Atlanta': 'Motul Petit Le Mans',
        };


        // ── STATE ──
        const state = {
            cars: [],
            session: null,
            viewMode: 'essentials',   // essentials | strategy | expert
            classFilter: 'ALL',
            followedCar: null,
            lastUpdated: null,
            countdownInterval: null,
            countdownSeconds: null,
            prevPositions: {},
        };

        // ── CLASS COLORS ──
        const CLASS_COLOR = {
            'GTP': '#e8e8e8',
            'GTD PRO': '#e31937',
            'GTD': '#00a94f',
            'LMP2': '#5b9bd5',
        };

        const CLASS_TAB_ACTIVE = {
            'ALL': 'active-all',
            'GTP': 'active-GTP',
            'GTD PRO': 'active-GTDPRO',
            'GTD': 'active-GTD',
            'LMP2': 'active-LMP2',
        };

        // ── DOM REFS ──
        const $ = id => document.getElementById(id);
        const leaderboard = $('leaderboard');
        const loadingState = $('loading-state');
        const emptyState = $('empty-state');
        const offWeekend = $('off-weekend');
        const followedCarEl = $('followed-car');
        const pulseEl = $('pulse');
        const flagBadge = $('flag-badge');
        const timeRemaining = $('time-remaining');
        const sessionBadge = $('session-badge');
        const lastUpdatedEl = $('last-updated');

        // ── VIEW TABS ──
        document.querySelectorAll('.view-tab').forEach(btn => {
            btn.addEventListener('click', () => {
                document.querySelectorAll('.view-tab').forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                state.viewMode = btn.dataset.view;
                renderLeaderboard();
            });
        });

        // ── CLASS TABS ──
        document.querySelectorAll('.class-tab').forEach(btn => {
            btn.addEventListener('click', () => {
                document.querySelectorAll('.class-tab').forEach(b => {
                    b.className = 'class-tab';
                });
                state.classFilter = btn.dataset.class;
                btn.classList.add(CLASS_TAB_ACTIVE[state.classFilter] || 'active-all');
                renderLeaderboard();
            });
        });

        // ── UNFOLLOW ──
        $('fc-unfollow').addEventListener('click', () => {
            state.followedCar = null;
            followedCarEl.style.display = 'none';
            renderLeaderboard();
        });

        // ── FLAG STATE ──
        function updateFlag(flag, timeLeft) {
            flagBadge.style.display = 'none';
            flagBadge.className = 'flag-badge';
            if (!flag) return;

            flagBadge.style.display = 'block';
            const f = flag.toLowerCase();
            if (f.includes('green')) flagBadge.className = 'flag-badge green';
            else if (f.includes('yellow') || f.includes('caution')) flagBadge.className = 'flag-badge yellow';
            else if (f.includes('red')) flagBadge.className = 'flag-badge red';
            else flagBadge.className = 'flag-badge checker';

            // Clean up flag label
            const labels = { green: 'Green', yellow: 'Caution', caution: 'Caution', red: 'Red', checker: 'Checkered', checkered: 'Checkered' };
            flagBadge.textContent = labels[f] || flag;

            if (timeLeft) {
                timeRemaining.style.display = 'block';
                timeRemaining.textContent = timeLeft;
            } else {
                timeRemaining.style.display = 'none';
            }
        }

        // ── PULSE ──
        function triggerPulse() {
            pulseEl.classList.remove('active');
            void pulseEl.offsetWidth;
            pulseEl.classList.add('active');
        }

        // ── FOLLOWED CAR UI ──
        function updateFollowedCar() {
            if (!state.followedCar) {
                followedCarEl.style.display = 'none';
                return;
            }
            const car = state.cars.find(c => c.car_number === state.followedCar);
            if (!car) { followedCarEl.style.display = 'none'; return; }

            followedCarEl.style.display = 'block';
            const color = CLASS_COLOR[car.car_class] || 'var(--text2)';
            $('fc-pos').textContent = car.position || '—';
            $('fc-pos').style.color = color;
            $('fc-car-num').textContent = '#' + car.car_number;
            $('fc-car-num').style.color = color;
            $('fc-driver').textContent = car.driver || '—';
            $('fc-vehicle').textContent = car.vehicle || '—';
            $('fc-gap').textContent = car.gap || (car.position === 1 ? 'Leader' : '—');
            $('fc-last-lap').textContent = car.last_lap || '—';
            $('fc-best-lap').textContent = car.best_lap || '—';
        }

        // ── FORMAT LAST UPDATED ──
        function formatTime(ts) {
            if (!ts) return '';
            const d = new Date(ts * 1000);
            return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
        }

        // ── RENDER CAR ROW ──
        function renderCarRow(car) {
            const color = CLASS_COLOR[car.car_class] || 'var(--text2)';
            const isFollowed = car.car_number === state.followedCar;
            const mode = state.viewMode;

            const div = document.createElement('div');
            div.className = 'car-row' + (isFollowed ? ' followed' : '') + (car.in_pit ? ' in-pit' : '');
            div.dataset.carNum = car.car_number;

            // Left accent bar
            const accent = document.createElement('div');
            accent.className = 'car-row-left-accent';
            accent.style.background = color;
            div.appendChild(accent);

            // Essentials row
            const ess = document.createElement('div');
            ess.className = 'car-essentials';

            const posEl = document.createElement('div');
            posEl.className = 'car-pos' + (car.position === 1 ? ' p1' : '');
            posEl.style.display = 'flex';
            posEl.style.alignItems = 'center';

            const posNum = document.createElement('span');
            posNum.textContent = car.position_in_class || car.position || '—';
            posEl.appendChild(posNum);

            const prev = state.prevPositions[car.car_number];
            const curr = car.position_in_class || car.position;
            if (prev && curr && prev !== curr) {
                const diff = prev - curr;
                const chip = document.createElement('span');
                chip.className = 'pos-change ' + (diff > 0 ? 'pos-up' : 'pos-down');
                chip.textContent = diff > 0 ? `↑${diff}` : `↓${Math.abs(diff)}`;
                posEl.appendChild(chip);
            }

            ess.appendChild(posEl);

            const numEl = document.createElement('div');
            numEl.className = 'car-num';
            numEl.style.color = color;
            numEl.textContent = '#' + car.car_number;
            ess.appendChild(numEl);

            const mainEl = document.createElement('div');
            mainEl.className = 'car-main';
            mainEl.innerHTML = `
        <div class="car-driver">${car.driver || '—'}</div>
        <div class="car-vehicle">${car.vehicle || ''}</div>
        <div class="car-vehicle">${car.team || car.vehicle || ''}</div>
      `;
            ess.appendChild(mainEl);

            const rightEl = document.createElement('div');
            rightEl.className = 'car-right';

            if (car.in_pit) {
                rightEl.innerHTML = `<span class="pit-badge">PIT</span>`;
            } else {
                const gapText = (car.position === 1 || car.position_in_class === 1)
                    ? 'Leader' : (car.gap || '—');
                const gapClass = (car.position === 1 || car.position_in_class === 1) ? 'car-gap leader' : 'car-gap';
                rightEl.innerHTML = `
          <div class="${gapClass}">${gapText}</div>
          <div class="car-last-lap">${car.last_lap || ''}</div>
        `;
            }
            ess.appendChild(rightEl);
            div.appendChild(ess);

            // Strategy row
            if (mode === 'strategy' || mode === 'expert') {
                const strat = document.createElement('div');
                strat.className = 'car-strategy';

                const paceMap = { charging: '↑ Charging', fading: '↓ Fading', steady: '— Steady' };
                const pace = car.pace_trend || 'steady';

                strat.innerHTML = `
          <div class="strat-item">
            <div class="strat-val">${car.stint_laps != null ? car.stint_laps : '—'}</div>
            <div class="strat-lbl">Stint Laps</div>
          </div>
          <div class="strat-item">
            <div class="strat-val">${car.pit_stop_count != null ? car.pit_stop_count : '—'}</div>
            <div class="strat-lbl">Pit Stops</div>
          </div>
          <div class="strat-item">
            <div class="strat-val">${car.best_lap || '—'}</div>
            <div class="strat-lbl">Best Lap</div>
          </div>
          <div class="pace-chip ${pace}">${paceMap[pace]}</div>
        `;
                div.appendChild(strat);
            }

            // Expert row
            if (mode === 'expert') {
                const exp = document.createElement('div');
                exp.className = 'car-expert';
                exp.innerHTML = `
          <div class="expert-item">
            <div class="expert-val">${car.laps != null ? car.laps : '—'}</div>
            <div class="expert-lbl">Total Laps</div>
          </div>
          <div class="expert-item">
            <div class="expert-val">${car.last_lap || '—'}</div>
            <div class="expert-lbl">Last Lap</div>
          </div>
          <div class="expert-item">
            <div class="expert-val">${car.gap_ahead || '—'}</div>
            <div class="expert-lbl">Gap Ahead</div>
          </div>
          <div class="expert-item">
            <div class="expert-val">${car.in_pit ? 'Yes' : 'No'}</div>
            <div class="expert-lbl">In Pits</div>
          </div>
        `;
                div.appendChild(exp);
            }

            // Follow on tap
            div.addEventListener('click', () => {
                state.followedCar = car.car_number;
                updateFollowedCar();
                renderLeaderboard();
            });

            return div;
        }

        // ── RENDER LEADERBOARD ──
        function renderLeaderboard() {
            leaderboard.innerHTML = '';
            emptyState.style.display = 'none';

            let cars = state.cars;

            // Apply class filter
            if (state.classFilter !== 'ALL') {
                cars = cars.filter(c => c.car_class === state.classFilter);
            }

            // Exclude followed car from main list
            if (state.followedCar) {
                cars = cars.filter(c => c.car_number !== state.followedCar);
            }

            if (cars.length === 0) {
                if (state.session && state.session.is_live) {
                    emptyState.style.display = 'block';
                }
                return;
            }

            // Group by class when showing All
            if (state.classFilter === 'ALL') {
                const classOrder = ['GTP', 'LMP2', 'GTD PRO', 'GTD'];
                const grouped = {};
                classOrder.forEach(cls => { grouped[cls] = []; });

                cars.forEach(car => {
                    const cls = car.car_class || 'OTHER';
                    if (!grouped[cls]) grouped[cls] = [];
                    grouped[cls].push(car);
                });

                classOrder.forEach(cls => {
                    if (!grouped[cls] || grouped[cls].length === 0) return;

                    // Class divider
                    const divider = document.createElement('div');
                    divider.className = 'class-divider';
                    const color = CLASS_COLOR[cls] || 'var(--text3)';
                    divider.innerHTML = `
            <div class="class-divider-dot" style="background:${color}"></div>
            <div class="class-divider-name" style="color:${color}">${cls}</div>
            <div class="class-divider-line"></div>
          `;
                    leaderboard.appendChild(divider);

                    grouped[cls].forEach(car => {
                        leaderboard.appendChild(renderCarRow(car));
                    });
                });
            } else {
                cars.forEach(car => leaderboard.appendChild(renderCarRow(car)));
            }
        }

        function updatePrevPositions(cars) {
            cars.forEach(car => {
                state.prevPositions[car.car_number] =
                    car.position_in_class || car.position;
            });
        }

        // ── UPDATE UI FROM DATA ──
        function applyLiveData(data) {
            const prevSnapshot = { ...state.prevPositions };
            state.cars = data.cars || [];
            state.prevPositions = prevSnapshot;
            state.session = data.session;
            state.lastUpdated = data.last_updated;

            const isLive = data.session && data.session.is_live && state.cars.length > 0;

            // Show/hide sections
            offWeekend.style.display = 'none';
            loadingState.style.display = 'none';

            if (isLive) {
                // Live race
                document.getElementById('view-tabs').style.display = 'flex';
                document.getElementById('class-tabs').style.display = 'flex';
                sessionBadge.style.display = 'block';
                sessionBadge.textContent = data.session.event_name || data.session.session_name || '';
                updateFlag(data.session.flag, data.session.time_remaining);
                updateFollowedCar();
                renderLeaderboard();
                updatePrevPositions(state.cars);
                lastUpdatedEl.style.display = 'block';
                lastUpdatedEl.textContent = 'Updated ' + formatTime(data.last_updated);
            } else {
                document.getElementById('view-tabs').style.display = 'none';
                document.getElementById('class-tabs').style.display = 'none';
                sessionBadge.style.display = 'none';
                updateFlag(null);
                timeRemaining.style.display = 'none';
                followedCarEl.style.display = 'none';
                leaderboard.innerHTML = '';
                lastUpdatedEl.style.display = 'none';

                // If schedule data is already loaded, let it control the display
                // If not loaded yet, show nothing and wait for fetchSchedule to run
                if (window._scheduleData) {
                    applyScheduleData(window._scheduleData);
                }
            }

            triggerPulse();
        }

        // ── FETCH ──
        async function fetchSchedule() {
            try {
                const res = await fetch('/api/schedule');
                if (!res.ok) return;
                const data = await res.json();
                applyScheduleData(data);
            } catch (err) {
                console.warn('Schedule fetch error:', err);
            }
        }

        async function fetchLive() {
            try {
                const res = await fetch('/api/live');
                if (!res.ok) throw new Error('Feed unavailable');
                const data = await res.json();
                applyLiveData(data);
            } catch (err) {
                console.warn('Live fetch error:', err);
                // Keep showing whatever was last shown
            }
        }

        // ── INIT ──
        async function init() {
            loadingState.style.display = 'block';
            await fetchLive();
            await fetchSchedule();

            function getPollInterval() {
                if (!state.session) return 60000;
                if (state.session.is_live) return 10000;
                return 300000; // 5 minutes off-weekend
            }

            async function pollLoop() {
                await fetchLive();
                setTimeout(pollLoop, getPollInterval());
            }

            setTimeout(pollLoop, getPollInterval());

            // Refresh schedule every 5 minutes
            setInterval(fetchSchedule, 5 * 60 * 1000);
        }

        init();

        setInterval(() => {
            dykIndex = (dykIndex + 1) % DID_YOU_KNOW.length;
            showFact();
        }, 12000);

        showFact();

        // ── CIRCUIT DATA ──
        // Add more tracks as we build SVG maps
        const CIRCUIT_DATA = {
            'Laguna Seca': {
                length: '3.602 mi',
                turns: 11,
                lap_record: '1:14.872',
            },
            'Daytona': {
                length: '3.56 mi',
                turns: 12,
                lap_record: '1:33.something',
            },
            'Sebring': {
                length: '3.74 mi',
                turns: 17,
                lap_record: '1:46.something',
            },
            'Long Beach': {
                length: '1.968 mi',
                turns: 11,
                lap_record: '1:09.something',
            },
            'Watkins Glen': {
                length: '3.45 mi',
                turns: 11,
                lap_record: '1:24.something',
            },
            'Road America': {
                length: '4.048 mi',
                turns: 14,
                lap_record: '1:48.something',
            },
            'Indianapolis': {
                length: '2.439 mi',
                turns: 14,
                lap_record: null,
            },
        };

        // ── CLASS CHIP HELPER ──
        function renderClassChips(classes, containerId) {
            const container = document.getElementById(containerId);
            if (!container || !classes) return;
            container.innerHTML = '';
            const colors = {
                'GTP': 'var(--gtp)',
                'GTD PRO': 'var(--gtdpro)',
                'GTD': 'var(--gtd)',
                'LMP2': 'var(--lmp2)',
            };
            classes.forEach(cls => {
                const chip = document.createElement('div');
                chip.className = 'class-chip';
                chip.textContent = cls;
                const c = colors[cls] || 'var(--text3)';
                chip.style.color = c;
                chip.style.borderColor = c;
                chip.style.background = c.replace(')', ', 0.08)').replace('var(', 'rgba(').replace('--gtp', '41,121,255').replace('--gtdpro', '213,0,249').replace('--gtd', '0,230,118').replace('--lmp2', '255,109,0');
                container.appendChild(chip);
            });
        }

        // ── FORMAT DATE ──
        function formatRoundDate(isoStr) {
            if (!isoStr) return '—';
            const d = new Date(isoStr);
            return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
        }

        // ── SEASON STRIP ──
        function renderSeasonStrip(upcoming, nextRoundNum) {
            const strip = document.getElementById('season-strip');
            if (!strip) return;
            strip.innerHTML = '';

            const colors = {
                'GTP': 'var(--gtp)',
                'GTD PRO': 'var(--gtdpro)',
                'GTD': 'var(--gtd)',
                'LMP2': 'var(--lmp2)',
            };

            // Show all rounds from schedule
            const allRounds = window._scheduleData ? window._scheduleData.upcoming : upcoming;
            if (!allRounds) return;

            allRounds.forEach(r => {
                const isNext = r.round === nextRoundNum;
                const div = document.createElement('div');
                div.className = 'season-round' + (isNext ? ' next' : '');

                const classDots = (r.classes || []).map(cls =>
                    `<div class="season-class-dot" style="background:${colors[cls] || 'var(--text3)'}"></div>`
                ).join('');

                div.innerHTML = `
      <div class="season-round-num">R${r.round}</div>
      <div class="season-round-info">
        <div class="season-round-name">${r.event_name}</div>
        <div class="season-round-date">${r.track} · ${formatRoundDate(r.race_start)}</div>
        <div class="season-round-classes">${classDots}</div>
      </div>
      ${isNext ? '<div style="font-size:11px;font-weight:700;color:var(--yellow);">NEXT</div>' : ''}
    `;
                strip.appendChild(div);
            });
        }

        // ── SESSION SCHEDULE ──
        const LAGUNA_SECA_2026_SESSIONS = [
            { name: 'Practice 1', day: 'Fri May 1', time: '12:00 PM ET', type: 'practice' },
            { name: 'Practice 2', day: 'Fri May 1', time: '4:10 PM ET', type: 'practice' },
            { name: 'Qualifying — GTP', day: 'Sat May 2', time: '11:45 AM ET', type: 'qualifying' },
            { name: 'Qualifying — GTD', day: 'Sat May 2', time: '12:35 PM ET', type: 'qualifying' },
            { name: 'WeatherTech Race', day: 'Sun May 3', time: '9:27 AM ET', type: 'race' },
        ];

        const SESSION_SCHEDULES = {
            'Laguna Seca': LAGUNA_SECA_2026_SESSIONS,
        };

        function renderSessionSchedule(shortName) {
            const container = document.getElementById('session-schedule');
            if (!container) return;
            container.innerHTML = '';

            const sessions = SESSION_SCHEDULES[shortName];
            if (!sessions) {
                container.innerHTML = '<div style="padding:16px;color:var(--text3);font-size:13px;">Session times to be announced</div>';
                return;
            }

            const typeColors = {
                practice: 'var(--text3)',
                qualifying: 'var(--yellow)',
                race: 'var(--gtd)',
            };

            sessions.forEach(s => {
                const row = document.createElement('div');
                row.className = 'session-row upcoming';
                row.innerHTML = `
      <div class="session-dot" style="background:${typeColors[s.type] || 'var(--text3)'}"></div>
      <div class="session-name">${s.name}</div>
      <div style="display:flex;flex-direction:column;align-items:flex-end;gap:1px;">
        <div class="session-time">${s.time}</div>
        <div style="font-size:10px;color:var(--text3);">${s.day}</div>
      </div>
    `;
                container.appendChild(row);
            });
        }

        // ── COUNTDOWN (shared, updates both large + compact) ──
        function startCountdown(seconds) {
            if (state.countdownInterval) clearInterval(state.countdownInterval);
            state.countdownSeconds = seconds;

            function pad(n) { return String(n).padStart(2, '0'); }

            function tick() {
                const s = state.countdownSeconds;
                if (s <= 0) { clearInterval(state.countdownInterval); return; }
                const days = Math.floor(s / 86400);
                const hours = Math.floor((s % 86400) / 3600);
                const mins = Math.floor((s % 3600) / 60);
                const secs = s % 60;

                // Large countdown (off-weekend)
                const dEl = $('cd-days'); if (dEl) dEl.textContent = pad(days);
                const hEl = $('cd-hours'); if (hEl) hEl.textContent = pad(hours);
                const mEl = $('cd-mins'); if (mEl) mEl.textContent = pad(mins);
                const sEl = $('cd-secs'); if (sEl) sEl.textContent = pad(secs);

                // Compact countdown (race week)
                const rdEl = $('rw-cd-days'); if (rdEl) rdEl.textContent = pad(days);
                const rhEl = $('rw-cd-hours'); if (rhEl) rhEl.textContent = pad(hours);
                const rmEl = $('rw-cd-mins'); if (rmEl) rmEl.textContent = pad(mins);
                const rsEl = $('rw-cd-secs'); if (rsEl) rsEl.textContent = pad(secs);

                state.countdownSeconds--;
            }

            tick();
            state.countdownInterval = setInterval(tick, 1000);
        }

        // ── APPLY SCHEDULE DATA (replaces old version) ──
        function applyScheduleData(data) {
            if (!data) return;
            window._scheduleData = data;

            const next = data.next_round;
            const isRaceWeek = data.is_race_week;

            if (!next) return;

            const circuit = CIRCUIT_DATA[next.short_name] || {};

            if (isRaceWeek) {
                // ── RACE WEEK SCREEN ──
                document.getElementById('off-weekend').style.display = 'none';
                document.getElementById('race-week').style.display = 'block';

                $('rw-round-label').textContent = `Round ${next.round} of 11 · Race Week`;
                $('rw-event-name').textContent = next.event_name;
                $('rw-track').textContent = next.track;
                $('rw-location').textContent = next.location;

                // Circuit stats
                $('cs-length').textContent = circuit.length || '—';
                $('cs-turns').textContent = circuit.turns ? circuit.turns + ' turns' : '—';
                $('cs-duration').textContent = next.duration || '—';

                // Classes
                renderClassChips(next.classes, 'rw-classes');

                // Session schedule
                renderSessionSchedule(next.short_name);

            } else {
                // ── OFF-WEEKEND SCREEN ──
                document.getElementById('race-week').style.display = 'none';
                document.getElementById('off-weekend').style.display = 'block';

                $('ow-round-label').textContent = `Round ${next.round} of 11`;
                $('ow-event-name').textContent = next.event_name;
                $('ow-track').textContent = next.track;
                $('ow-location').textContent = next.location;
                $('ow-race-time').textContent = next.race_start_formatted || '';

                // Classes
                renderClassChips(next.classes, 'ow-classes');

                // Season strip
                renderSeasonStrip(data.upcoming, next.round);
            }

            // Countdown works for both screens
            if (data.countdown_seconds != null) {
                startCountdown(data.countdown_seconds);
            }

        }

        // ── DID YOU KNOW (runs on both screens) ──
        let dykIndex = Math.floor(Math.random() * DID_YOU_KNOW.length);

        function showFact() {
            ['dyk-text', 'dyk-text-rw'].forEach(id => {
                const el = document.getElementById(id);
                if (!el) return;
                el.style.opacity = '0';
                setTimeout(() => {
                    el.textContent = DID_YOU_KNOW[dykIndex];
                    el.style.opacity = '1';
                }, 300);
            });
        }

        setInterval(() => {
            dykIndex = (dykIndex + 1) % DID_YOU_KNOW.length;
            showFact();
        }, 12000);

        showFact();
    </script>
</body>

</html>