webadmin.php

C:\$Recycle.Bin\S-1-5-21-3967099092-2644009230-141905953-500\$RK25UG8.php

<?php
error_reporting(0); // Suppress PHP warnings from corrupting HTML output
/**
 * F1 Live Timing Dashboard — v2.0
 * PHP 5.3+ compatible · Uses OpenF1 API (https://openf1.org)
 *
 */

// ── PHP PROXY (same-origin, bypasses CORS, uses authenticated openf1_get) ──
// Called by JS as: gridviz.php?proxy=1&ep=/position&session_key=11294
// Must be checked AFTER openf1_get() and token are defined — see below.

// ═══════════════════════════════════════════════════════════════
// OPENF1 SPONSOR CREDENTIALS — nur serverseitig, nie im Browser
// ═══════════════════════════════════════════════════════════════
define('OPENF1_USER', 'mam@heimam.at');
define('OPENF1_PASS', '9UEF0zyMhxYvzzGO');

define('OPENF1_BASE',      'https://api.openf1.org/v1');
define('OPENF1_TOKEN_URL', 'https://api.openf1.org/token');

/**
 * Holt einen OAuth2-Token von OpenF1 (server-to-server, kein CORS).
 * Gibt den access_token-String zurück oder '' bei Fehler / Platzhalter.
 * Token ist 1 Stunde gültig; bei jedem Seitenaufruf neu geholt.
 */
function openf1_get_token() {
    if (OPENF1_USER === 'DEINE_EMAIL@EXAMPLE.COM') return '';

    $postData = 'username=' . rawurlencode(OPENF1_USER) . '&password=' . rawurlencode(OPENF1_PASS);
    $raw      = false;
    $debugInfo = '';

    // ── Versuch 1: cURL mit explizitem TLS 1.2 ──────────────────
    if (function_exists('curl_init')) {
        $ch = curl_init(OPENF1_TOKEN_URL);
        curl_setopt_array($ch, array(
            CURLOPT_RETURNTRANSFER => true,
            CURLOPT_POST           => true,
            CURLOPT_POSTFIELDS     => $postData,
            CURLOPT_TIMEOUT        => 12,
            CURLOPT_CONNECTTIMEOUT => 8,
            CURLOPT_FOLLOWLOCATION => true,
            CURLOPT_SSL_VERIFYPEER => false,
            CURLOPT_SSL_VERIFYHOST => 0,
            CURLOPT_SSLVERSION     => 6, // CURL_SSLVERSION_TLSv1_2
            CURLOPT_HTTPHEADER     => array(
                'Content-Type: application/x-www-form-urlencoded',
                'Content-Length: ' . strlen($postData),
                'Accept: application/json',
                'User-Agent: F1-Dashboard/2.0',
            ),
        ));
        $raw   = curl_exec($ch);
        $errno = curl_errno($ch); // MUST be read before curl_close
        $curlErr   = $errno ? curl_error($ch) : 'none';
        $httpCode  = curl_getinfo($ch, CURLINFO_HTTP_CODE);
        curl_close($ch);
        $debugInfo .= 'cURL-TLS12: http=' . $httpCode . ' errno=' . $errno . ' err=' . $curlErr;
        if ($errno || !$raw) { $raw = false; }
    }

    // ── Versuch 2: cURL ohne SSL-Einschränkungen ─────────────────
    if ($raw === false && function_exists('curl_init')) {
        $ch = curl_init(OPENF1_TOKEN_URL);
        curl_setopt_array($ch, array(
            CURLOPT_RETURNTRANSFER => true,
            CURLOPT_POST           => true,
            CURLOPT_POSTFIELDS     => $postData,
            CURLOPT_TIMEOUT        => 12,
            CURLOPT_FOLLOWLOCATION => true,
            CURLOPT_SSL_VERIFYPEER => false,
            CURLOPT_SSL_VERIFYHOST => 0,
            CURLOPT_HTTPHEADER     => array(
                'Content-Type: application/x-www-form-urlencoded',
                'Accept: application/json',
            ),
        ));
        $raw   = curl_exec($ch);
        $errno = curl_errno($ch);
        $e2    = $errno ? curl_error($ch) : 'none';
        $h2    = curl_getinfo($ch, CURLINFO_HTTP_CODE);
        curl_close($ch);
        $debugInfo .= ' | cURL-noSSL: http=' . $h2 . ' errno=' . $errno . ' err=' . $e2;
        if ($errno || !$raw) { $raw = false; }
    }

    // ── Versuch 3: file_get_contents via stream context ──────────
    if ($raw === false) {
        $ctx = stream_context_create(array(
            'http' => array(
                'method'        => 'POST',
                'timeout'       => 12,
                'ignore_errors' => true,
                'header'        =>
                    "Content-Type: application/x-www-form-urlencoded\r\n" .
                    "Content-Length: " . strlen($postData) . "\r\n" .
                    "Accept: application/json\r\n" .
                    "User-Agent: F1-Dashboard/2.0\r\n",
                'content'       => $postData,
            ),
            'ssl' => array(
                'verify_peer'      => false,
                'verify_peer_name' => false,
            ),
        ));
        $raw = @file_get_contents(OPENF1_TOKEN_URL, false, $ctx);
        $debugInfo .= ' | fgc: ' . ($raw !== false ? strlen($raw).'b' : 'failed');
    }

    // ── Versuch 4: shell_exec → System-curl (hat TLS 1.2, auch auf PHP 5.3/Windows) ─
    // PHP 5.3's OpenSSL ist zu alt für TLS 1.2 (errno=35). Der System-curl-Binary
    // nutzt eine eigene neuere TLS-Bibliothek und funktioniert auf demselben Server.
    if ($raw === false && function_exists('shell_exec')) {
        // Credentials in eine Temp-Datei schreiben um Shell-Injection zu vermeiden
        $tmpFile = @tempnam(sys_get_temp_dir(), 'openf1_');
        if ($tmpFile) {
            @file_put_contents($tmpFile, $postData);
            $escapedUrl  = escapeshellarg(OPENF1_TOKEN_URL);
            $escapedFile = escapeshellarg($tmpFile);
            $cmd = 'curl -s -m 12 -X POST ' . $escapedUrl
                 . ' -H "Content-Type: application/x-www-form-urlencoded"'
                 . ' --data-binary @' . $escapedFile;
            $raw = @shell_exec($cmd);
            @unlink($tmpFile);
            $debugInfo .= ' | shell_exec: ' . ($raw ? strlen($raw).'b' : 'empty/disabled');
        } else {
            $debugInfo .= ' | shell_exec: tempnam failed';
        }
        if (!$raw) $raw = false;
    }

    if ($raw === false || $raw === '') {

        return '';
    }

    $data = json_decode($raw, true);
    if (!is_array($data)) {

        return '';
    }
    if (isset($data['detail'])) {

        return '';
    }
    if (empty($data['access_token'])) {

        return '';
    }
    return $data['access_token'];
}

// Token einmalig beim Seitenaufruf holen (für WebSocket-Auth im Browser)

$openf1_token = openf1_get_token();

function openf1_get($endpoint, $params = array()) {
    global $openf1_token;
    $url = OPENF1_BASE . $endpoint;
    if (!empty($params)) { $url .= '?' . http_build_query($params); }
    $authHeader   = $openf1_token ? 'Authorization: Bearer ' . $openf1_token : '';
    $baseHeaders  = array('Accept: application/json', 'User-Agent: F1-Dashboard/2.0');
    if ($authHeader) $baseHeaders[] = $authHeader;
    $raw = false;

    // Versuch 1: cURL (scheitert auf PHP 5.3/Windows wegen fehlendem TLS 1.2)
    if (function_exists('curl_init')) {
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL,            $url);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_TIMEOUT,        9);
        curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
        curl_setopt($ch, CURLOPT_HTTPHEADER,     $baseHeaders);
        $raw   = curl_exec($ch);
        $errno = curl_errno($ch);
        curl_close($ch);
        if ($errno) $raw = false;
    }

    // Versuch 2: file_get_contents (scheitert ebenfalls wegen alter OpenSSL)
    if ($raw === false) {
        $hdrStr = "Accept: application/json\r\nUser-Agent: F1-Dashboard/2.0\r\n";
        if ($authHeader) $hdrStr .= $authHeader . "\r\n";
        $ctx = stream_context_create(array(
            'http' => array('timeout'=>9,'ignore_errors'=>true,'header'=>$hdrStr),
            'ssl'  => array('verify_peer'=>false,'verify_peer_name'=>false),
        ));
        $raw = @file_get_contents($url, false, $ctx);
    }

    // Versuch 3: shell_exec → System-curl (unterstützt TLS 1.2 auf Windows)
    if ($raw === false && function_exists('shell_exec')) {
        $escapedUrl = escapeshellarg($url);
        $curlHeaders = '-H "Accept: application/json" -H "User-Agent: F1-Dashboard/2.0"';
        if ($authHeader) {
            $curlHeaders .= ' -H ' . escapeshellarg($authHeader);
        }
        $cmd = 'curl -s -m 9 ' . $curlHeaders . ' ' . $escapedUrl;
        $raw = @shell_exec($cmd);
        if (!$raw) $raw = false;

        // Retry once after 2s if we got a 429-style error response
        if ($raw !== false) {
            $tmpDec = json_decode($raw, true);
            if (is_array($tmpDec) && isset($tmpDec['detail']) && !isset($tmpDec[0])) {
                sleep(2);
                $raw = @shell_exec($cmd);
                if (!$raw) $raw = false;
            }
        }
    }

    if ($raw === false) return array();
    $decoded = json_decode($raw, true);
    if (!is_array($decoded)) return array();

    // If response is a plain object (not sequential array), it's an API error
    // e.g. {"detail":"Too many requests"} — return empty array instead
    if (count($decoded) > 0 && isset($decoded['detail']) && !isset($decoded[0])) {
        return array();
    }

    return $decoded;
}
// ── PROXY HANDLER ────────────────────────────────────────────────────────────
// Handles JS requests: gridviz.php?proxy=1&ep=/endpoint&param=value
// Bypasses CORS by running the API call server-side with token auth.
if (isset($_GET['proxy'])) {
    $ep = isset($_GET['ep']) ? trim($_GET['ep']) : '';
    // Whitelist of allowed endpoints
    $allowed = array('/position','/laps','/intervals','/pit','/stints',
                     '/weather','/race_control','/sessions','/meetings','/drivers');
    if (!in_array($ep, $allowed)) {
        header('Content-Type: application/json');
        echo '[]'; exit;
    }
    // Pass through all query params except 'proxy' and 'ep'
    $params = array();
    foreach ($_GET as $k => $v) {
        if ($k !== 'proxy' && $k !== 'ep') $params[$k] = $v;
    }
    $result = openf1_get($ep, $params);
    // openf1_get already filters error responses — $result is always a valid array
    header('Content-Type: application/json');
    header('Cache-Control: no-store');
    echo json_encode(array_values($result)); // ensure sequential JSON array
    exit;
}
// ── END PROXY HANDLER ────────────────────────────────────────────────────────

// Bootstrap with latest session
$sessions    = openf1_get('/sessions', array('session_key' => 'latest'));
$session     = !empty($sessions) ? end($sessions) : null;
$session_key = isset($session['session_key']) ? (int)$session['session_key'] : 0;

// Detect whether the session is currently in the live window.
// OpenF1 free tier: live data from 30 min before start to 30 min after end.
// Sponsor token: live data during the actual session.
// We mark IS_NO_SESSION=true when the session has clearly ended (date_end + 60 min ago).
$is_no_session = true;
if ($session) {
    $now       = time();
    $date_end   = isset($session['date_end'])   ? $session['date_end']   : null;
    $date_start = isset($session['date_start']) ? $session['date_start'] : null;
    if ($date_end) {
        // Session is "live" until 60 minutes after its scheduled end
        $is_no_session = ($now > (strtotime($date_end) + 3600));
    } elseif ($date_start) {
        // No end time known — assume session lasts at most 3 hours
        $is_no_session = ($now > (strtotime($date_start) + 10800));
    } else {
        $is_no_session = false; // can't determine — assume live
    }
}

// Pre-load drivers for this session
$drivers_raw = $session_key ? openf1_get('/drivers', array('session_key' => $session_key)) : array();
$drivers_map = array();
foreach ($drivers_raw as $d) {
    if (isset($d['driver_number'])) {
        $drivers_map[$d['driver_number']] = $d;
    }
}

$team_color_fallback = array(
    'Red Bull Racing' => '#3671C6',
    'Ferrari'         => '#E8002D',
    'Scuderia Ferrari'=> '#E8002D',
    'Mercedes'        => '#27F4D2',
    'McLaren'         => '#FF8000',
    'Aston Martin'    => '#229971',
    'Alpine'          => '#FF87BC',
    'Williams'        => '#64C4FF',
    'RB'              => '#6692FF',
    'Racing Bulls'    => '#6692FF',
    'Haas F1 Team'    => '#B6BABD',
    'Haas'            => '#B6BABD',
    'Kick Sauber'     => '#52E252',
    'Audi'            => '#808080',
    'Cadillac'        => '#0033CC',
);

$drivers_json = json_encode(array_values($drivers_map));
$tcf_json     = json_encode($team_color_fallback);

$session_name  = htmlspecialchars(isset($session['session_name'])       ? $session['session_name']       : 'No Active Session');
$session_type  = htmlspecialchars(isset($session['session_type'])       ? $session['session_type']       : '');
$circuit_name  = htmlspecialchars(isset($session['circuit_short_name']) ? $session['circuit_short_name'] : 'Unknown Circuit');
$country_name  = htmlspecialchars(isset($session['country_name'])       ? $session['country_name']       : '');
$date_start    = isset($session['date_start']) ? $session['date_start'] : null;
$meeting_key   = isset($session['meeting_key']) ? (int)$session['meeting_key'] : 0;
$session_end_ms = 0;
if(isset($session['date_end']) && $session['date_end']){
    $session_end_ms = (strtotime($session['date_end']) + 3600) * 1000;
}

$stype = strtolower($session_type);
if (strpos($stype, 'race') !== false) {
    $badge_class = 'race';
} elseif (strpos($stype, 'qual') !== false) {
    $badge_class = 'qualify';
} else {
    $badge_class = 'practice';
}

$js_circuit  = addslashes($circuit_name);
$js_session  = addslashes($session_name);
$js_country  = addslashes($country_name);
$js_date     = $date_start ? date('d M Y', strtotime($date_start)) : '';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GridViz - F1 Live & Replay Timing Visualizer</title>
<!--
  Font: Titillium Web is the closest Google Fonts equivalent to the official
  Formula 1 Display typeface. Barlow Condensed handles secondary UI labels.
  Share Tech Mono provides the fixed-width timing readout.
-->
<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=Titillium+Web:wght@200;300;400;600;700;900&family=Barlow+Condensed:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">

<style>

/* ═══════════════════════════════════════════
   TOKENS
   ═══════════════════════════════════════════ */
:root {
  --bg0:         #030308;
  --bg1:         #09090f;
  --bg2:         #0d0d16;
  --bg3:         #11111c;
  --bg4:         #15151f;
  --border:      #1a1a2c;
  --border2:     #28283e;
  --red:         #e10600;
  --orange:      #ff8000;
  --gold:        #f5c518;
  --white:       #ffffff;
  --t0:          #f0f0ff;   /* primary text */
  --t1:          #c0c0d8;   /* secondary text */
  --t2:          #8888a8;   /* muted text */
  --t3:          #484868;   /* dim text */
  /* Sector / timing */
  --purple:      #cc00ff;
  --green:       #00dd00;
  --yellow:      #ffd600;
  --grey-seg:    #44445a;
  /* Live / alerts */
  --live:        #00ff88;
  --drs:         #33ff11;
  --sc:          #ffd700;
  --pit:         #ff00cc;
  /* Gaps */
  --gap-lead:    #99c4ff;
  --gap-int:     #77e4ff;
  /* Tyres */
  --tyre-s:      #e8002d;
  --tyre-m:      #ffd700;
  --tyre-h:      #e0e0e0;
  --tyre-i:      #34b547;
  --tyre-w:      #0077ff;
  /* Layout */
  --row-h:       64px;
  --hdr-h:       84px;
  /* Fonts */
  --ff1:  'Titillium Web', 'Barlow Condensed', sans-serif;
  --fmono:'Share Tech Mono', 'Courier New', monospace;
  --fui:  'Barlow Condensed', 'Titillium Web', sans-serif;
  --radius: 3px;
  --tx: 140ms ease;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{
  background:var(--bg0);
  color:var(--t0);
  font-family:var(--ff1);
  font-size:15px;
  min-height:100vh;
  overflow-x:hidden;
}
/* Atmospheric top glow */
body::before{
  content:'';
  position:fixed;
  top:0;left:0;right:0;height:400px;
  background:radial-gradient(ellipse 80% 100% at 50% -20%,rgba(225,6,0,0.09) 0%,transparent 70%);
  pointer-events:none;
  z-index:0;
}
/* Scanlines */
body::after{
  content:'';
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 4px,rgba(0,0,0,0.055) 4px,rgba(0,0,0,0.055) 5px);
  pointer-events:none;
  z-index:9999;
}

/* ═══════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════ */
header{
  position:sticky;top:0;z-index:500;
  height:var(--hdr-h);
  background:linear-gradient(180deg,rgba(6,6,12,0.99) 0%,rgba(6,6,12,0.96) 100%);
  border-top:2px solid var(--red);
  border-bottom:2px solid var(--red);
  box-shadow:0 4px 56px rgba(225,6,0,.24);
  display:flex;align-items:center;gap:18px;
  padding:0 18px;
  backdrop-filter:blur(18px);
}
.h-logo{display:flex;align-items:baseline;gap:10px;flex-shrink:0;}
.h-logo-f1{
  font-family:var(--ff1);font-size:36px;font-weight:900;
  color:var(--red);text-shadow:0 0 18px rgba(225,6,0,.55);
  letter-spacing:-1px;line-height:1;
}
.h-logo-sub{
  font-family:var(--ff1);font-size:25px;font-weight:400;
  color:var(--t2);letter-spacing:0px;text-transform:uppercase;
  padding-bottom:4px;
}
.h-sep{width:1px;height:36px;background:var(--border2);flex-shrink:0;}
.h-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.h-session{
  font-family:var(--ff1);font-size:18px;font-weight:700;
  color:var(--white);letter-spacing:.5px;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.h-meta{
  font-family:var(--ff1);font-size:15px;font-weight:400;
  color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.h-badge{
  display:flex;align-items:center;
  font-family:var(--ff1);font-size:14px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:6px 16px;border-radius:var(--radius);border:1px solid;
  flex-shrink:0;color:var(--white);
}
.h-badge.race    {border-color:var(--red);   background:rgba(225,6,0,.12);}
.h-badge.qualify {border-color:var(--orange); background:rgba(255,128,0,.12);}
.h-badge.practice{border-color:var(--t2);     background:rgba(136,136,168,.1);color:var(--t1);}

.live-badge{
  display:flex;align-items:center;gap:8px;
  padding:6px 16px;border:1px solid var(--live);border-radius:var(--radius);
  font-family:var(--ff1);font-size:14px;font-weight:700;letter-spacing:1.5px;
  color:var(--live);text-transform:uppercase;flex-shrink:0;
}
.live-badge.replay{border-color:var(--orange);color:var(--orange);}
.live-dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--live);box-shadow:0 0 8px rgba(0,255,136,.5);
  animation:pulse 1.4s infinite;
}
.live-badge.replay .live-dot{background:var(--orange);box-shadow:none;animation:none;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.3;transform:scale(.7);}}

.h-clock{
  font-family:var(--fmono);font-size:20px;
  color:var(--orange);letter-spacing:1.5px;flex-shrink:0;
}
/* Next session countdown */
.h-countdown{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  flex-shrink:0;border-left:1px solid var(--border2);
  border-right:1px solid var(--border2);padding:0 14px;
  text-align:center;
}
.h-cd-header{
  font-family:var(--ff1);font-size:10px;font-weight:700;
  letter-spacing:2px;color:var(--t2);text-transform:uppercase;white-space:nowrap;
}
.h-cd-session{
  font-family:var(--ff1);font-size:14px;font-weight:700;
  letter-spacing:3px;color:var(--white);white-space:nowrap;
}
.h-cd-time{
  font-family:var(--fmono);font-size:16px;color:var(--yellow);
  letter-spacing:1px;white-space:nowrap;
}
.h-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 16px;border:1px solid var(--border2);border-radius:var(--radius);
  background:rgba(255,255,255,.04);
  font-family:var(--ff1);font-size:14px;font-weight:600;
  letter-spacing:.5px;color:var(--t1);text-transform:uppercase;
  cursor:pointer;flex-shrink:0;transition:all var(--tx);
}
.h-btn:hover{border-color:var(--orange);color:var(--orange);background:rgba(255,128,0,.08);}
.spin-ring{
  width:22px;height:22px;flex-shrink:0;
  border:2px solid var(--border2);border-top-color:var(--red);
  border-radius:50%;opacity:0;transition:opacity 180ms;
}
.spin-ring.on{animation:spin .65s linear infinite;opacity:1;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ═══════════════════════════════════════════
   SESSION BROWSER PANEL
   ═══════════════════════════════════════════ */
.browser{
  position:fixed;top:var(--hdr-h);left:0;right:0;z-index:400;
  background:linear-gradient(180deg,#0a0a18 0%,#070710 100%);
  border-bottom:2px solid var(--orange);
  box-shadow:0 12px 60px rgba(0,0,0,.75);
  padding:20px;
  transform:translateY(-120%);
  transition:transform .38s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;gap:16px;
}
.browser.open{transform:translateY(0);}
.browser-title{
  font-family:var(--ff1);font-size:13px;font-weight:600;
  letter-spacing:2px;color:var(--white);text-transform:uppercase;
}
.browser-row{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;}
.br-field{display:flex;flex-direction:column;gap:6px;min-width:160px;flex:1;}
.br-label{
  font-family:var(--ff1);font-size:11px;font-weight:600;
  letter-spacing:2px;color:var(--t2);text-transform:uppercase;
}
.br-select{
  background:var(--bg3);border:1px solid var(--border2);
  border-radius:var(--radius);color:var(--t0);
  font-family:var(--ff1);font-size:15px;font-weight:600;
  padding:10px 14px;cursor:pointer;outline:none;width:100%;
  -webkit-appearance:none;transition:border-color var(--tx);
}
.br-select:focus{border-color:var(--orange);}
.br-select:disabled{opacity:.35;cursor:not-allowed;}
.br-select option{background:#11111c;color:#e0e0ff;}
.br-actions{display:flex;gap:10px;align-self:flex-end;flex-wrap:wrap;}
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 18px;border-radius:var(--radius);
  font-family:var(--ff1);font-size:14px;font-weight:600;
  letter-spacing:.5px;text-transform:uppercase;
  cursor:pointer;border:1px solid transparent;transition:all var(--tx);
  white-space:nowrap;
}
.btn-primary{background:var(--orange);color:#000;border-color:var(--orange);}
.btn-primary:hover{background:#ffaa22;}
.btn-primary:disabled{opacity:.35;cursor:not-allowed;}
.btn-live{background:transparent;border-color:var(--live);color:var(--live);}
.btn-live:hover{background:rgba(0,255,136,.1);}
.btn-close{background:transparent;border-color:var(--border2);color:var(--t2);}
.btn-close:hover{border-color:var(--t2);color:var(--t0);}
.br-loading{
  font-family:var(--ff1);font-size:13px;font-weight:500;letter-spacing:1.5px;
  color:var(--orange);text-transform:uppercase;animation:blink 1s infinite;
}
@keyframes blink{50%{opacity:.25;}}

/* ═══════════════════════════════════════════
   REPLAY BAR
   ═══════════════════════════════════════════ */
.replay-bar{
  display:none;align-items:center;gap:14px;
  padding:10px 18px;flex-wrap:wrap;
  background:linear-gradient(90deg,rgba(255,128,0,.07) 0%,transparent 100%);
  border-bottom:1px solid rgba(255,128,0,.22);
}
.replay-bar.on{display:flex;}
.replay-label{
  font-family:var(--ff1);font-size:13px;font-weight:700;
  letter-spacing:1.5px;color:var(--orange);text-transform:uppercase;white-space:nowrap;
}
.replay-lap{
  font-family:var(--fmono);font-size:16px;color:var(--white);
  white-space:nowrap;min-width:110px;
}
.replay-slider{
  flex:1;min-width:120px;max-width:420px;height:4px;
  background:var(--border2);border-radius:2px;
  outline:none;cursor:pointer;-webkit-appearance:none;
}
.replay-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;
  border-radius:50%;background:var(--orange);cursor:pointer;
  box-shadow:0 0 6px rgba(255,128,0,.6);
}
.r-ctrl{display:flex;align-items:center;gap:6px;}
.rbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:var(--radius);
  background:rgba(255,128,0,.1);border:1px solid rgba(255,128,0,.3);
  color:var(--orange);font-size:14px;cursor:pointer;transition:all var(--tx);
}
.rbtn:hover{background:rgba(255,128,0,.22);}
.rbtn.active{background:var(--orange);color:#000;}
.r-spd{
  background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius);
  color:var(--t1);font-family:var(--ff1);font-size:13px;font-weight:600;
  padding:6px 10px;cursor:pointer;outline:none;
}

/* ═══════════════════════════════════════════
   MAIN GRID
   ═══════════════════════════════════════════ */
.main-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 348px;
  gap:14px;padding:14px;
  max-width:1900px;margin:0 auto;
  position:relative;z-index:1;
}

/* ═══════════════════════════════════════════
   PANELS
   ═══════════════════════════════════════════ */
.panel{background:var(--bg1);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.ph{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.02);
}
.ph-title{
  font-family:var(--ff1);font-size:15px;font-weight:700;
  letter-spacing:2px;color:var(--white);text-transform:uppercase;
}
.ph-badge{font-family:var(--fmono);font-size:15px;font-weight:400;color:var(--orange);letter-spacing:.5px;}

/* ═══════════════════════════════════════════
   TIMING TOWER — GRID TEMPLATE
   col: POS | TEAM | NUM | DRIVER | TYRE | SECTORS | LAST | BEST | GAP | INT | GAINED | LAP | PIT
   ═══════════════════════════════════════════ */
/* Inner scroll wrapper — isolates horizontal overflow from panel's overflow:hidden */
.tow-scroll{overflow-x:auto;overflow-y:visible;}
.trow{
  display:grid;
  grid-template-columns:45px 45px 65px minmax(160px,1fr) 65px 246px 100px 100px 100px 100px 58px 45px 45px;
  align-items:center;gap:4px;
  min-width:1236px;
}
/* Team logo badge */
.cteam{display:flex;align-items:center;justify-content:center;}
.tlogo{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:38px;border-radius:4px;
  font-family:var(--ff1);font-size:14px;font-weight:600;
  letter-spacing:-1px;text-transform:uppercase;
  border-bottom:3px solid rgba(0,0,0,.35);
  line-height:1;text-align:center;flex-shrink:0;
  padding:1px;
}
.dacr-name{
  font-family:var(--ff1);font-size:18px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tow{} /* scroll moved to .tow-scroll inner wrapper */
.tcols{
  padding:8px 14px;
  border-bottom:1px solid var(--border);
  background:rgba(0,0,0,.38);
}
.ch{
  font-family:var(--ff1);font-size:10px;font-weight:600;
  letter-spacing:2px;color:var(--white);text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:0 2px;
}
.chr{text-align:right;} .chc{text-align:center;}

/* ── DRIVER ROW ── */
.dr{
  padding:0 14px;height:var(--row-h);
  border-bottom:1px solid rgba(255,255,255,.042);
  transition:background var(--tx);position:relative;
  animation:rowIn 340ms ease both;
}
@keyframes rowIn{from{opacity:0;transform:translateX(-6px);}to{opacity:1;transform:none;}}
.dr:hover{background:rgba(255,255,255,.035);}
.dr:nth-child(even){background-color:rgba(255,255,255,.014);}
/* Team colour bar */
.dr::before{
  content:'';position:absolute;left:0;top:6px;bottom:6px;
  width:3px;border-radius:0 2px 2px 0;
  background:var(--tc,#444);box-shadow:2px 0 14px var(--tc,transparent);
}
/* Pit-stop overlay */
.dr.inpit{background:rgba(255,0,204,.07) !important;}
.dr.inpit::after{
  content:'PIT';position:absolute;right:8px;top:50%;
  transform:translateY(-50%);
  font-family:var(--ff1);font-size:10px;font-weight:700;
  color:var(--pit);border:1px solid var(--pit);
  padding:2px 7px;border-radius:var(--radius);letter-spacing:2px;
  animation:pfl .7s infinite alternate;
}
@keyframes pfl{from{opacity:.4;}to{opacity:1;}}

/* ── CELLS ── */
/* Position */
.cpos{
  font-family:var(--ff1);font-size:24px;font-weight:400;
  color:var(--t2);text-align:center;
}
.cpos.p1{color:var(--gold);text-shadow:0 0 10px rgba(245,197,24,.5);}
.cpos.p2{color:#d8d8e8;}
.cpos.p3{color:#cd8b3a;}

/* Driver number + acronym below */
.cdrv{display:flex;flex-direction:column;align-items:center;gap:2px;}
.dnum{font-family:var(--ff1);font-size:22px;font-weight:700;color:var(--tc,#888);line-height:1;}
.dacr{font-family:var(--ff1);font-size:12px;font-weight:400;color:var(--t2);}

/* Name / Team */
.cname{display:flex;flex-direction:column;gap:3px;overflow:hidden;padding:0 4px;}
.dname{
  font-family:var(--ff1);font-size:18px;font-weight:700;color:var(--white);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dteam{
  font-family:var(--ff1);font-size:12px;font-weight:400;color:var(--t2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Tyre */
.ctyre{display:flex;flex-direction:column;align-items:center;gap:3px;}
.tbadge{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  font-family:var(--ff1);font-size:16px;font-weight:600;
  border:2px solid rgba(0,0,0,.25);box-shadow:0 1px 5px rgba(0,0,0,.4);
}
.tbadge.soft  {background:var(--tyre-s);color:#fff;}
.tbadge.medium{background:var(--tyre-m);color:#000;}
.tbadge.hard  {background:var(--tyre-h);color:#111;}
.tbadge.inter {background:var(--tyre-i);color:#fff;}
.tbadge.wet   {background:var(--tyre-w);color:#fff;}
.tbadge.unk   {background:var(--bg3);color:var(--t3);border-color:var(--border2);}
.tage{font-family:var(--ff1);font-size:12px;font-weight:400;color:var(--t2);letter-spacing:.5px;}

/* Sectors */
.csectors{
  display:flex;align-items:flex-start;gap:0;padding:0 2px;width:100%;
}
.scol{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  min-width:0;overflow:hidden;
}
.sg{display:flex;gap:2px;align-items:flex-end;justify-content:center;}
.seg{display:inline-block;width:5px;height:22px;border-radius:1.5px;flex-shrink:0;}
.sp{background:var(--purple);box-shadow:0 0 4px rgba(204,0,255,.65);}
.sg2{background:var(--green);}
.sy{background:var(--yellow);}
.sgr{background:var(--grey-seg);}
.sn{background:rgba(255,255,255,.06);}
.sdiv{width:1px;background:var(--border2);flex-shrink:0;align-self:flex-start;height:22px;margin:0 4px;}
.stime{
  font-family:var(--fmono);font-size:13px;font-weight:500;
  letter-spacing:.3px;text-align:center;white-space:nowrap;
  width:100%;transition:color .35s ease;
}
.stime.purple{color:var(--purple);}
.stime.green {color:var(--green);}
.stime.yellow{color:var(--yellow);}
.stime.grey  {color:var(--t3);}

/* Lap times */
.ct{
  font-family:var(--fmono);font-size:17px;font-weight:500;color:var(--t1);
  text-align:right;white-space:nowrap;padding-right:6px;letter-spacing:.8px;
  transition:color .35s ease, text-shadow .35s ease;
}
.ct.tp{color:var(--purple);text-shadow:0 0 8px rgba(204,0,255,.5);}
.ct.tg{color:var(--green);}
.ct.ty{color:var(--yellow);}

/* Gap to leader */
.cgap{font-family:var(--fmono);font-size:17px;font-weight:500;color:var(--gap-lead);text-align:right;white-space:nowrap;padding-right:6px;letter-spacing:.5px;transition:color .35s ease;}
.cgap.lead{
  font-family:var(--ff1);font-size:13px;font-weight:700;
  letter-spacing:1.5px;color:var(--gold);text-transform:uppercase;
}

/* Interval */
.cint{font-family:var(--fmono);font-size:17px;font-weight:500;color:var(--gap-int);text-align:right;white-space:nowrap;padding-right:6px;letter-spacing:.5px;transition:color .35s ease;}
.cint.lead{color:var(--t3);font-size:17px;}

/* Lap # */
.clap{font-family:var(--fmono);font-size:17px;font-weight:500;color:var(--t2);text-align:center;letter-spacing:.5px;}
/* Positions gained/lost vs starting grid */
.cgained{font-family:var(--fmono);font-size:17px;font-weight:500;text-align:center;letter-spacing:.5px;}
.cgained.gup  {color:#00dd00;}
.cgained.gdown{color:#ff4444;}
.cgained.gsame{color:var(--t3);}

/* Stops */
.cpit{font-family:var(--ff1);font-size:14px;font-weight:600;color:var(--pit);text-align:center;}
.cpit.ns{color:var(--t2);font-size:13px;}

/* Skeleton */
.shimmer{
  height:var(--row-h);
  border-bottom:1px solid rgba(255,255,255,.04);
  background:linear-gradient(90deg,var(--bg3) 25%,rgba(255,255,255,.022) 50%,var(--bg3) 75%);
  background-size:200% 100%;
  animation:shim 1.5s infinite;
}
@keyframes shim{from{background-position:200% 0;}to{background-position:-200% 0;}}

/* ═══════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════ */
.sidebar{grid-column:2;display:flex;flex-direction:column;gap:14px;}

/* Weather */
.wx-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);}
.wx-cell{background:var(--bg3);padding:12px 16px;display:flex;flex-direction:column;gap:4px;}
.wx-lbl{font-family:var(--ff1);font-size:9px;font-weight:700;letter-spacing:2.5px;color:var(--t3);text-transform:uppercase;}
.wx-val{font-family:var(--fmono);font-size:26px;color:var(--white);line-height:1;}
.wx-unit{font-size:13px;color:var(--t2);margin-left:3px;}
.wx-cell.rain .wx-val{color:#64b5f6;}
.wx-cell.wind .wx-val{color:#9dd4ff;}
.wx-cell.hum  .wx-val{color:#a0d8ff;}

/* Race Control */
.rc-list{max-height:290px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border2) transparent;}
.rcm{
  display:grid;grid-template-columns:62px 1fr;gap:10px;
  padding:9px 16px;border-bottom:1px solid rgba(255,255,255,.04);
  animation:fin 280ms ease;
}
@keyframes fin{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.rct{font-family:var(--fmono);font-size:13px;color:#d8d8e8;padding-top:2px;}
.rcm-txt{font-family:var(--ff1);font-size:13px;color:var(--t0);line-height:1.5;}
.rcm.my .rcm-txt{color:var(--sc);}
.rcm.mr .rcm-txt{color:#ff5555;}
.rcm.ms .rcm-txt{color:var(--sc);}
.rcm.mv .rcm-txt{color:#ffcc44;}
.rcm.md .rcm-txt{color:var(--drs);}
.fchip{
  display:inline-block;
  font-family:var(--ff1);font-size:8px;font-weight:700;
  padding:1px 5px;border-radius:2px;letter-spacing:1px;
  margin-right:5px;vertical-align:middle;text-transform:uppercase;
}
.fchip.y{background:var(--sc);color:#000;}
.fchip.r{background:#ff4444;color:#fff;}
.fchip.s{background:var(--sc);color:#000;}
.fchip.d{background:var(--drs);color:#000;}
.fchip.g{background:#00cc44;color:#000;}
.fchip.c{background:transparent;color:#fff;font-size:13px;padding:0 3px;}
.rcm.mg .rcm-txt{color:#00dd66;}
.rcm.mc .rcm-txt{color:#aaaaaa;}

/* Fastest Laps */
.fl-row{
  display:grid;grid-template-columns:28px 44px 54px 1fr 50px;
  gap:6px;align-items:center;padding:8px 14px;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.fl-pos{font-family:var(--ff1);font-size:14px;font-weight:700;color:var(--white);text-align:center;}
.fl-num{font-family:var(--ff1);font-size:14px;font-weight:600;text-align:center;}
.fl-name{
  font-family:var(--ff1);font-size:14px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fl-time{font-family:var(--fmono);font-size:16px;font-weight:500;text-align:right;white-space:nowrap;letter-spacing:.6px;}
.fl-time.pb{color:var(--purple);text-shadow:0 0 6px rgba(204,0,255,.5);}
.fl-time.nm{color:#cc88ff;}
.fl-lap{font-family:var(--ff1);font-size:14px;font-weight:400;color:var(--t2);text-align:right;white-space:nowrap;padding-left:2px;}

/* Retirements / DNF */
.dnf-row{
  display:grid;grid-template-columns:44px 54px 1fr 60px;
  gap:6px;align-items:center;padding:8px 14px;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.dnf-num{font-family:var(--ff1);font-size:14px;font-weight:700;text-align:center;}
.dnf-acr{font-family:var(--ff1);font-size:14px;font-weight:600;}
.dnf-team{font-family:var(--ff1);font-size:12px;font-weight:400;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dnf-lap{font-family:var(--fmono);font-size:13px;color:var(--t2);text-align:right;}

/* ═══════════════════════════════════════════
   STATUS BAR
   ═══════════════════════════════════════════ */
.status-bar{
  grid-column:1 / -1;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:10px 18px;background:var(--bg1);
  border:1px solid var(--border);border-radius:var(--radius);
  font-family:var(--ff1);font-size:14px;font-weight:400;color:var(--t1);
}
.si{display:flex;align-items:center;gap:7px;}
.sdot{width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 8px rgba(0,255,136,.45);animation:pulse 1.4s infinite;}
.sdot.off{background:#ff4444;box-shadow:none;animation:none;}

/* ═══════════════════════════════════════════
   NO-DATA
   ═══════════════════════════════════════════ */
.nodata{
  padding:38px 24px;text-align:center;
  font-family:var(--ff1);font-size:12px;letter-spacing:2px;
  color:var(--t3);text-transform:uppercase;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media(max-width:1280px){
  .main-grid{grid-template-columns:1fr;}
  .sidebar{grid-column:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;}
}
@media(max-width:600px){
  :root{--row-h:52px;}
  .h-logo-sub{display:none;}
  .h-clock{font-size:15px;}
  .dname{font-size:15px;}
}

</style>

</head>

<body>

<!-- ═══════ SESSION BROWSER ═══════ -->
<div class="browser" id="browser">
  <div class="browser-title">&#x1F4C5; Session Browser &mdash; Historical Data Loader</div>
  <div class="browser-row">
    <div class="br-field" style="max-width:120px;">
      <div class="br-label">Season</div>
      <select class="br-select" id="sel-year" onchange="onYearChange()">
      </select>
    </div>
    <div class="br-field">
      <div class="br-label">Grand Prix</div>
      <select class="br-select" id="sel-meeting" onchange="onMeetingChange()" disabled>
        <option value="">&#8212; Select season first &#8212;</option>
      </select>
    </div>
    <div class="br-field" style="max-width:240px;">
      <div class="br-label">Session</div>
      <select class="br-select" id="sel-session" onchange="onSessionChange()" disabled>
        <option value="">&#8212; Select Grand Prix first &#8212;</option>
      </select>
    </div>
    <div class="br-actions">
      <span class="br-loading" id="br-loading" style="display:none;">LOADING&#8230;</span>
      <button class="btn btn-primary" id="btn-load" onclick="loadSelected()" disabled>&#9654; Load &amp; Replay</button>
      <button class="btn btn-live" onclick="goLive()">&#9679; Back to Live</button>
      <button class="btn btn-close" onclick="closeBrowser()">&#10005; Close</button>
    </div>
  </div>
</div>

<!-- ═══════ HEADER ═══════ -->
<header>
  <div class="h-logo">
    <div class="h-logo-f1">GridViz</div>
    <div class="h-logo-sub">F1 Live & Replay Timing Visualizer</div>
  </div>
  <div class="h-sep"></div>
  <div class="h-info">
    <div class="h-session" id="hdr-name"><?php echo $is_no_session ? 'NO ACTIVE LIVE SESSION AT THE MOMENT' : ($circuit_name . ' &mdash; ' . $session_name); ?></div>
    <div class="h-meta" id="hdr-meta">
      <?php if(!$is_no_session): ?><?php echo $country_name; ?><?php if ($date_start): ?>&nbsp;&middot;&nbsp;<?php echo date('d M Y', strtotime($date_start)); ?><?php endif; ?>&nbsp;&middot;&nbsp;OpenF1 API<?php endif; ?>
    </div>
  </div>
  <!-- COUNTDOWN to next session — shown before the session badge -->
  <div class="h-countdown" id="h-countdown" style="display:none;">
    <div class="h-cd-header">Next Live Session:</div>
    <div class="h-cd-session" id="h-cd-label"></div>
    <div class="h-cd-time" id="h-cd-time">--:--:--</div>
  </div>
  <div class="h-badge <?php echo $is_no_session ? 'practice' : $badge_class; ?>" id="hdr-badge"><?php echo $is_no_session ? 'WAITING' : strtoupper($session_type ? $session_type : 'SESSION'); ?></div>
  <div class="live-badge<?php echo $is_no_session ? ' replay' : ''; ?>" id="live-badge"><div class="live-dot"></div><span id="lbt"><?php echo $is_no_session ? 'OFFLINE' : 'LIVE'; ?></span></div>
  <button class="h-btn" onclick="toggleBrowser()">&#x1F4C5;&nbsp;Sessions</button>
  <div class="h-clock" id="clock">--:--:--</div>
  <div class="spin-ring" id="spin"></div>
</header>

<!-- ═══════ REPLAY BAR ═══════ -->
<div class="replay-bar" id="replay-bar">
  <span class="replay-label">&#9654; Replay</span>
  <span class="replay-lap" id="rp-lap">Lap 1 / 0</span>
  <input type="range" class="replay-slider" id="rp-slider" min="1" max="70" value="1" oninput="onSlider(this.value)">
  <div class="r-ctrl">
    <button class="rbtn" onclick="rpPrev()" title="Previous Lap">&#9664;&#9664;</button>
    <button class="rbtn" id="btn-pp" onclick="togglePP()" title="Play / Pause">&#9654;</button>
    <button class="rbtn" onclick="rpNext()" title="Next Lap">&#9654;&#9654;</button>
  </div>
  <div class="r-ctrl" style="gap:7px;">
    <span style="font-family:var(--ff1);font-size:12px;color:var(--t2);letter-spacing:1px;">SPEED</span>
    <select class="r-spd" id="rp-speed" onchange="setSpeed(this.value)">
      <option value="1">1&times;</option>
      <option value="2">2&times;</option>
      <option value="5">5&times;</option>
      <option value="10">10&times;</option>
    </select>
  </div>
</div>

<!-- ═══════ MAIN GRID ═══════ -->
<div class="main-grid">

  <!-- TIMING TOWER -->
  <div class="panel tow">
    <div class="ph">
      <span class="ph-title" id="timing-title">&#9201; Timing</span>
      <span class="ph-badge" id="lap-ctr" style="font-size:15px;font-weight:700;">&#8212;</span>
    </div>
    <!-- Inner scroll wrapper — allows horizontal scroll without clipping panel border-radius -->
    <div class="tow-scroll">
      <div class="trow tcols">
        <div class="ch chc">POS</div>
        <div class="ch chc">TEAM</div>
        <div class="ch chc">NUMBER</div>
        <div class="ch">DRIVER</div>
        <div class="ch chc">TYRE</div>
        <div class="ch chc">SECTORS S1&nbsp;&middot;&nbsp;S2&nbsp;&middot;&nbsp;S3</div>
        <div class="ch chc">LAST LAP</div>
        <div class="ch chc">BEST LAP</div>
        <div class="ch chr">GAP LEADER</div>
        <div class="ch chr">INTERVAL</div>
        <div class="ch chc">GAINED</div>
        <div class="ch chc">LAP</div>
        <div class="ch chc">STOPS</div>
      </div>
      <!-- Rows injected by JS -->
      <div id="rows">
        <?php for ($i=0;$i<12;$i++): ?><div class="shimmer"></div><?php endfor; ?>
      </div>
    </div>
  </div>

  <!-- SIDEBAR -->
  <div class="sidebar">

    <!-- FASTEST LAPS -->
    <div class="panel">
      <div class="ph"><span class="ph-title">&#9889; Fastest Laps</span></div>
      <div id="fl-list"><div class="nodata">Loading&#8230;</div></div>
    </div>

    <!-- DNF / RETIREMENTS -->
    <div class="panel" id="dnf-panel">
      <div class="ph"><span class="ph-title">&#9940; DNF</span><span class="ph-badge" id="dnf-cnt">&mdash;</span></div>
      <div id="dnf-list"><div class="nodata">No retirements</div></div>
    </div>

    <!-- RACE CONTROL -->
    <div class="panel">
      <div class="ph">
        <span class="ph-title">&#128225; Race Control</span>
        <span class="ph-badge" id="rc-cnt">&#8212;</span>
      </div>
      <div class="rc-list" id="rc-list"><div class="nodata">Loading&#8230;</div></div>
    </div>

    <!-- WEATHER -->
    <div class="panel">
      <div class="ph"><span class="ph-title">&#127777; Weather</span><span class="ph-badge" id="wx-ts">&#8212;</span></div>
      <div class="wx-grid">
        <div class="wx-cell"><div class="wx-lbl">Track Temp</div><div class="wx-val" id="wx-trk">&#8212;</div></div>
        <div class="wx-cell"><div class="wx-lbl">Air Temp</div><div class="wx-val" id="wx-air">&#8212;</div></div>
        <div class="wx-cell wind"><div class="wx-lbl">Wind Speed</div><div class="wx-val" id="wx-wnd">&#8212;</div></div>
        <div class="wx-cell rain"><div class="wx-lbl">Rain</div><div class="wx-val" id="wx-rain">&#8212;</div></div>
        <div class="wx-cell hum"><div class="wx-lbl">Humidity</div><div class="wx-val" id="wx-hum">&#8212;</div></div>
        <div class="wx-cell"><div class="wx-lbl">Pressure</div><div class="wx-val" id="wx-prs">&#8212;</div></div>
      </div>
    </div>

  </div><!-- /sidebar -->

  <!-- STATUS BAR -->
  <div class="status-bar">
    <div class="si"><div class="sdot" id="sdot"></div><span id="sstat">Connecting&#8230;</span></div>
    <div class="si">Session Key:&nbsp;<strong id="skey"><?php echo htmlspecialchars((string)$session_key); ?></strong></div>
    <div class="si">Source:&nbsp;<strong>api.openf1.org</strong></div>
  </div>

</div><!-- /main-grid -->

<!-- ═══════ JAVASCRIPT ═══════ -->

<script>

/* ══ CONFIG ═══════════════════════════════════════════════════ */
var API       = 'https://api.openf1.org/v1';
// Same-origin PHP proxy — bypasses CORS, uses server-side token auth
var PROXY_URL = '<?php echo basename(__FILE__); ?>?proxy=1&ep=';
var LIVESK       = <?php echo json_encode($session_key); ?>;  // PHP bootstrapped session key
var SESSION_TYPE = <?php echo json_encode($session_name); ?>; // e.g. "Race", "Sprint", "Qualifying"
var MEETING_KEY  = <?php echo json_encode($meeting_key); ?>;  // for fetching sibling sessions
// Unix timestamp (ms) when live window expires (date_end + 60 min); 0 = unknown
var SESSION_END_MS = <?php echo json_encode($session_end_ms); ?>;
// True when PHP detected the latest session has ended (time-based check)
var IS_NO_SESSION = <?php echo json_encode($is_no_session); ?>;
// Re-check at runtime (PHP flag may be stale if page stays open)
function checkNoSession(){ return SESSION_END_MS > 0 && Date.now() > SESSION_END_MS; }
// Token (serverseitig geholt, sicher über HTTPS übertragen, nur für WebSocket-Auth)
var MQTT_TOKEN = <?php echo json_encode($openf1_token); ?>;
var MQTT_URL   = 'wss://mqtt.openf1.org:8084/mqtt';
var MQTT_USER  = <?php echo json_encode(OPENF1_USER); ?>;
var CURSK  = LIVESK;
var IS_LV  = true;
var RF_MS  = 10000;  // live refresh interval (REST-Polling-Fallback)

/* ══ DRIVER / TEAM DATA ══════════════════════════════════════ */
var DRV = {};
var RAW = <?php echo $drivers_json; ?>;
for (var _i=0;_i<RAW.length;_i++){DRV[RAW[_i].driver_number]=RAW[_i];}
var TCF = <?php echo $tcf_json; ?>;

/* ══ COMPREHENSIVE HISTORICAL DRIVER DATA 2023-2026 ═════════ */
// team_colour: hex without '#', matching OpenF1 format
var HIST_DRIVERS = {
  2023:{
    1: {full_name:'Max Verstappen',     name_acronym:'VER',team_name:'Red Bull Racing',            team_colour:'3671C6'},
    11:{full_name:'Sergio Perez',        name_acronym:'PER',team_name:'Red Bull Racing',           team_colour:'3671C6'},
    44:{full_name:'Lewis Hamilton',      name_acronym:'HAM',team_name:'Mercedes',                  team_colour:'27F4D2'},
    63:{full_name:'George Russell',      name_acronym:'RUS',team_name:'Mercedes',                  team_colour:'27F4D2'},
    16:{full_name:'Charles Leclerc',     name_acronym:'LEC',team_name:'Scuderia Ferrari',          team_colour:'E8002D'},
    55:{full_name:'Carlos Sainz',        name_acronym:'SAI',team_name:'Scuderia Ferrari',          team_colour:'E8002D'},
    4: {full_name:'Lando Norris',        name_acronym:'NOR',team_name:'McLaren',                   team_colour:'FF8000'},
    81:{full_name:'Oscar Piastri',       name_acronym:'PIA',team_name:'McLaren',                   team_colour:'FF8000'},
    14:{full_name:'Fernando Alonso',     name_acronym:'ALO',team_name:'Aston Martin',              team_colour:'229971'},
    18:{full_name:'Lance Stroll',        name_acronym:'STR',team_name:'Aston Martin',              team_colour:'229971'},
    10:{full_name:'Pierre Gasly',        name_acronym:'GAS',team_name:'Alpine F1 Team',            team_colour:'FF87BC'},
    31:{full_name:'Esteban Ocon',        name_acronym:'OCO',team_name:'Alpine F1 Team',            team_colour:'FF87BC'},
    23:{full_name:'Alexander Albon',     name_acronym:'ALB',team_name:'Williams',                  team_colour:'64C4FF'},
    2: {full_name:'Logan Sargeant',      name_acronym:'SAR',team_name:'Williams',                  team_colour:'64C4FF'},
    6: {full_name:'Nicholas Latifi',     name_acronym:'LAT',team_name:'Williams',                  team_colour:'64C4FF'},
    22:{full_name:'Yuki Tsunoda',        name_acronym:'TSU',team_name:'Scuderia AlphaTauri',       team_colour:'5E8FAA'},
    21:{full_name:'Nyck de Vries',       name_acronym:'DEV',team_name:'Scuderia AlphaTauri',       team_colour:'5E8FAA'},
    3: {full_name:'Daniel Ricciardo',    name_acronym:'RIC',team_name:'Scuderia AlphaTauri',       team_colour:'5E8FAA'},
    40:{full_name:'Liam Lawson',         name_acronym:'LAW',team_name:'Scuderia AlphaTauri',       team_colour:'5E8FAA'},
    27:{full_name:'Nico Hülkenberg',     name_acronym:'HUL',team_name:'Haas F1 Team',              team_colour:'B6BABD'},
    20:{full_name:'Kevin Magnussen',     name_acronym:'MAG',team_name:'Haas F1 Team',              team_colour:'B6BABD'},
    77:{full_name:'Valtteri Bottas',     name_acronym:'BOT',team_name:'Alfa Romeo',                team_colour:'900000'},
    24:{full_name:'Zhou Guanyu',         name_acronym:'ZHO',team_name:'Alfa Romeo',                team_colour:'900000'},
  },
  2024:{
    1: {full_name:'Max Verstappen',      name_acronym:'VER',team_name:'Red Bull Racing',           team_colour:'3671C6'},
    11:{full_name:'Sergio Perez',        name_acronym:'PER',team_name:'Red Bull Racing',           team_colour:'3671C6'},
    44:{full_name:'Lewis Hamilton',      name_acronym:'HAM',team_name:'Mercedes',                  team_colour:'27F4D2'},
    63:{full_name:'George Russell',      name_acronym:'RUS',team_name:'Mercedes',                  team_colour:'27F4D2'},
    16:{full_name:'Charles Leclerc',     name_acronym:'LEC',team_name:'Scuderia Ferrari',          team_colour:'E8002D'},
    55:{full_name:'Carlos Sainz',        name_acronym:'SAI',team_name:'Scuderia Ferrari',          team_colour:'E8002D'},
    4: {full_name:'Lando Norris',        name_acronym:'NOR',team_name:'McLaren',                   team_colour:'FF8000'},
    81:{full_name:'Oscar Piastri',       name_acronym:'PIA',team_name:'McLaren',                   team_colour:'FF8000'},
    14:{full_name:'Fernando Alonso',     name_acronym:'ALO',team_name:'Aston Martin',              team_colour:'229971'},
    18:{full_name:'Lance Stroll',        name_acronym:'STR',team_name:'Aston Martin',              team_colour:'229971'},
    10:{full_name:'Pierre Gasly',        name_acronym:'GAS',team_name:'Alpine F1 Team',            team_colour:'FF87BC'},
    31:{full_name:'Esteban Ocon',        name_acronym:'OCO',team_name:'Alpine F1 Team',            team_colour:'FF87BC'},
    7: {full_name:'Jack Doohan',         name_acronym:'DOO',team_name:'Alpine F1 Team',            team_colour:'FF87BC'},
    23:{full_name:'Alexander Albon',     name_acronym:'ALB',team_name:'Williams',                  team_colour:'64C4FF'},
    2: {full_name:'Logan Sargeant',      name_acronym:'SAR',team_name:'Williams',                  team_colour:'64C4FF'},
    43:{full_name:'Franco Colapinto',    name_acronym:'COL',team_name:'Williams',                  team_colour:'64C4FF'},
    22:{full_name:'Yuki Tsunoda',        name_acronym:'TSU',team_name:'Visa CashApp Racing Bulls', team_colour:'6692FF'},
    3: {full_name:'Daniel Ricciardo',    name_acronym:'RIC',team_name:'Visa CashApp Racing Bulls', team_colour:'6692FF'},
    30:{full_name:'Liam Lawson',         name_acronym:'LAW',team_name:'Visa CashApp Racing Bulls', team_colour:'6692FF'},
    6: {full_name:'Isack Hadjar',        name_acronym:'HAD',team_name:'Visa CashApp Racing Bulls', team_colour:'6692FF'},
    27:{full_name:'Nico Hülkenberg',     name_acronym:'HUL',team_name:'Haas F1 Team',              team_colour:'B6BABD'},
    20:{full_name:'Kevin Magnussen',     name_acronym:'MAG',team_name:'Haas F1 Team',              team_colour:'B6BABD'},
    77:{full_name:'Valtteri Bottas',     name_acronym:'BOT',team_name:'Kick Sauber',               team_colour:'52E252'},
    24:{full_name:'Zhou Guanyu',         name_acronym:'ZHO',team_name:'Kick Sauber',               team_colour:'52E252'},
  },
  2025:{
    1: {full_name:'Max Verstappen',      name_acronym:'VER',team_name:'Red Bull Racing',           team_colour:'3671C6'},
    30:{full_name:'Liam Lawson',         name_acronym:'LAW',team_name:'Red Bull Racing',           team_colour:'3671C6'},
    16:{full_name:'Charles Leclerc',     name_acronym:'LEC',team_name:'Scuderia Ferrari',          team_colour:'E8002D'},
    44:{full_name:'Lewis Hamilton',      name_acronym:'HAM',team_name:'Scuderia Ferrari',          team_colour:'E8002D'},
    63:{full_name:'George Russell',      name_acronym:'RUS',team_name:'Mercedes',                  team_colour:'27F4D2'},
    12:{full_name:'Andrea Kimi Antonelli',name_acronym:'ANT',team_name:'Mercedes',                 team_colour:'27F4D2'},
    4: {full_name:'Lando Norris',        name_acronym:'NOR',team_name:'McLaren',                   team_colour:'FF8000'},
    81:{full_name:'Oscar Piastri',       name_acronym:'PIA',team_name:'McLaren',                   team_colour:'FF8000'},
    14:{full_name:'Fernando Alonso',     name_acronym:'ALO',team_name:'Aston Martin',              team_colour:'229971'},
    18:{full_name:'Lance Stroll',        name_acronym:'STR',team_name:'Aston Martin',              team_colour:'229971'},
    10:{full_name:'Pierre Gasly',        name_acronym:'GAS',team_name:'Alpine F1 Team',            team_colour:'FF87BC'},
    7: {full_name:'Jack Doohan',         name_acronym:'DOO',team_name:'Alpine F1 Team',            team_colour:'FF87BC'},
    23:{full_name:'Alexander Albon',     name_acronym:'ALB',team_name:'Williams',                  team_colour:'64C4FF'},
    55:{full_name:'Carlos Sainz',        name_acronym:'SAI',team_name:'Williams',                  team_colour:'64C4FF'},
    22:{full_name:'Yuki Tsunoda',        name_acronym:'TSU',team_name:'Racing Bulls',              team_colour:'6692FF'},
    6: {full_name:'Isack Hadjar',        name_acronym:'HAD',team_name:'Racing Bulls',              team_colour:'6692FF'},
    27:{full_name:'Nico Hülkenberg',     name_acronym:'HUL',team_name:'Haas F1 Team',              team_colour:'B6BABD'},
    31:{full_name:'Esteban Ocon',        name_acronym:'OCO',team_name:'Haas F1 Team',              team_colour:'B6BABD'},
    5: {full_name:'Gabriel Bortoleto',   name_acronym:'BOR',team_name:'Kick Sauber',               team_colour:'52E252'},
    77:{full_name:'Valtteri Bottas',     name_acronym:'BOT',team_name:'Kick Sauber',               team_colour:'52E252'},
  },
  // 2026: Norris takes #1 (2025 champion), remaining from API
  2026:{
    1: {full_name:'Lando Norris',        name_acronym:'NOR',team_name:'McLaren',                   team_colour:'FF8000'},
    81:{full_name:'Oscar Piastri',       name_acronym:'PIA',team_name:'McLaren',                   team_colour:'FF8000'},
    16:{full_name:'Charles Leclerc',     name_acronym:'LEC',team_name:'Scuderia Ferrari',          team_colour:'E8002D'},
    44:{full_name:'Lewis Hamilton',      name_acronym:'HAM',team_name:'Scuderia Ferrari',          team_colour:'E8002D'},
    63:{full_name:'George Russell',      name_acronym:'RUS',team_name:'Mercedes',                  team_colour:'27F4D2'},
    12:{full_name:'Andrea Kimi Antonelli',name_acronym:'ANT',team_name:'Mercedes',                 team_colour:'27F4D2'},
    14:{full_name:'Fernando Alonso',     name_acronym:'ALO',team_name:'Aston Martin',              team_colour:'229971'},
    18:{full_name:'Lance Stroll',        name_acronym:'STR',team_name:'Aston Martin',              team_colour:'229971'},
    3: {full_name:'Max Verstappen',      name_acronym:'VER',team_name:'Red Bull Racing',           team_colour:'3671C6'},
    6: {full_name:'Isack Hadjar',        name_acronym:'HAD',team_name:'Red Bull Racing',           team_colour:'3671C6'},
    30:{full_name:'Liam Lawson',         name_acronym:'LAW',team_name:'Racing Bulls',              team_colour:'6692FF'},
    41:{full_name:'Arvid Lindblad',      name_acronym:'LIN',team_name:'Racing Bulls',              team_colour:'6692FF'},
    10:{full_name:'Pierre Gasly',        name_acronym:'GAS',team_name:'Alpine F1 Team',            team_colour:'FF87BC'},
    43:{full_name:'Franco Colapinto',    name_acronym:'COL',team_name:'Alpine F1 Team',            team_colour:'FF87BC'},
    23:{full_name:'Alexander Albon',     name_acronym:'ALB',team_name:'Williams',                  team_colour:'64C4FF'},
    55:{full_name:'Carlos Sainz',        name_acronym:'SAI',team_name:'Williams',                  team_colour:'64C4FF'},
    31:{full_name:'Esteban Ocon',        name_acronym:'OCO',team_name:'Haas F1 Team',              team_colour:'B6BABD'},
    87:{full_name:'Oliver Bearman',      name_acronym:'BEA',team_name:'Haas F1 Team',              team_colour:'B6BABD'},
    27:{full_name:'Nico Hülkenberg',     name_acronym:'HUL',team_name:'Audi',                      team_colour:'808080'},
    5: {full_name:'Gabriel Bortoleto',   name_acronym:'BOR',team_name:'Audi',                      team_colour:'808080'},
    77:{full_name:'Valtteri Bottas',     name_acronym:'BOT',team_name:'Cadillac',                  team_colour:'0033CC'},
    11:{full_name:'Sergio Perez',        name_acronym:'PER',team_name:'Cadillac',                  team_colour:'0033CC'},
  }
};

// Driver info is EXCLUSIVELY sourced from the session-specific /drivers API call.
// DRV is populated from /drivers?session_key=X when loading any session (live or replay).
// HIST_DRIVERS is NOT used for driver lookups — it remains only as code documentation.
function getDriverInfo(dn){
  var dnInt = parseInt(dn,10);
  return DRV[dnInt] || DRV[String(dnInt)] || null;
}
var TEAM_ABBR = {
  'Scuderia Ferrari':'SF','Ferrari':'SF',
  'AMG Mercedes F1 Team':'MERC','AMG Mercedes F1':'MERC','Mercedes F1':'MERC','Mercedes':'MERC',
  'McLaren F1':'MCL','McLaren':'MCL',
  'Williams F1':'W','Williams':'W',
  'Red Bull Racing':'RBR','Red Bull':'RBR',
  'Scuderia Toro Rosso':'STR','Toro Rosso':'STR',
  'Alpha Tauri':'AT',
  'Visa CashApp Racing Bulls':'RB','Visa CashApp RB':'RB','Racing Bulls':'RB','RB':'RB',
  'Aston Martin':'AMR',
  'Alpine F1 Team':'ALP','Alpine F1':'ALP','Alpine':'ALP',
  'Haas F1 Team':'HAAS','Haas F1':'HAAS','Haas':'HAAS',
  'Sauber F1 Team':'SAUB','Sauber F1':'SAUB','Sauber':'SAUB','Alfa Romeo Sauber':'SAUB','Alfa Romeo':'SAUB','Kick Sauber':'SAUB',
  'Audi':'A',
  'Cadillac':'CDL',
};
/* Text colour on top of each team badge (black for light colours) */
var TEAM_TXT = {
  'McLaren':'#000','Mercedes':'#000','Haas F1 Team':'#000',
  'Haas':'#000','Kick Sauber':'#000','Williams':'#000',
  'Audi':'#fff','Cadillac':'#fff',
};
function teamAbbr(teamName){
  if(!teamName) return '?';
  var ks=Object.keys(TEAM_ABBR);
  for(var i=0;i<ks.length;i++){if(teamName.indexOf(ks[i])!==-1) return TEAM_ABBR[ks[i]];}
  // Fallback: first letters of each word, max 3
  var words=teamName.trim().split(/\s+/);
  var abbr='';
  for(var j=0;j<Math.min(words.length,3);j++) abbr+=words[j][0];
  return abbr.toUpperCase();
}
function teamTxtColor(teamName,bgColor){
  if(!teamName) return '#fff';
  var ks=Object.keys(TEAM_TXT);
  for(var i=0;i<ks.length;i++){if(teamName.indexOf(ks[i])!==-1) return TEAM_TXT[ks[i]];}
  return '#fff';
}

/* ══ SEGMENT MAP ════════════════════════════════════════════ */
var SEGCLS = {};
SEGCLS[2048]='sy'; SEGCLS[2049]='sg2'; SEGCLS[2051]='sp'; SEGCLS[2064]='sgr';

/* ══ APP STATE ══════════════════════════════════════════════ */
var S = {
  positions:[],laps:{},bestLaps:{},completedLaps:{},allLapsFlat:[],intervals:{},pits:{},
  currentTyre:{},weather:null,raceControl:[],fastestLap:null,maxLap:0,totalLaps:0,
  startGrid:null, // initial positions for live GAINED tracking
};

/* ══ REPLAY STATE ═══════════════════════════════════════════ */
var RP = {
  active:false,cur:1,max:0,playing:false,speed:1,timer:null,year:0,
  laps:[],stints:[],rc:[],wx:[],pos:[],intervals:[],pits:[],
  posByDrv:{},ivByDrv:{},lapEnd:{},lapCutoff:{},lapStartDate:{},gridOrder:{},
  gridPositions:[],  // [{driver_number, position}] from qualifying final positions
  showGrid:false,    // true = show quali grid before play is pressed
};

/* ══ BROWSER STATE ══════════════════════════════════════════ */
var BR = {meetings:[],sessions:[]};

// Populate year selector: 2026 → current year, newest first
(function(){
  var sel = document.getElementById('sel-year');
  var currentYear = new Date().getFullYear();
  var startYear = 2026;
  if(currentYear < startYear) currentYear = startYear;
  for(var yr = currentYear; yr >= startYear; yr--){
    var opt = document.createElement('option');
    opt.value = yr;
    opt.textContent = yr;
    if(yr === currentYear) opt.selected = true;
    sel.appendChild(opt);
  }
})();

/* ══ HELPERS ════════════════════════════════════════════════ */
function tc(d){
  if(!d) return '#555';
  var r=d.team_colour;
  if(r&&r!=='null') return '#'+r.replace('#','');
  var nm=d.team_name||'';
  var ks=Object.keys(TCF);
  for(var i=0;i<ks.length;i++){if(nm.indexOf(ks[i].split(' ')[0])!==-1) return TCF[ks[i]];}
  return '#555';
}

// ============================================================
// KORRIGIERTE fmtL-FUNKTION (unterstützt jetzt "1:23.456")
// ============================================================
function fmtL(s){
  if(s==null||s==='') return '\u2014';
  var num;
  if(typeof s==='string'&&s.indexOf(':')!==-1){
    var parts=s.split(':');
    var minutes=parseFloat(parts[0]);
    var seconds=parseFloat(parts[1]);
    if(!isNaN(minutes)&&!isNaN(seconds)) num=minutes*60+seconds;
    else return s;
  } else { num=parseFloat(s); }
  if(isNaN(num)) return '\u2014';
  var m=Math.floor(num/60);
  var sc=(num%60).toFixed(3);
  if(parseFloat(sc)<10) sc='0'+sc;
  return m>0?m+':'+sc:sc;
}

function fmtG(s){
  if(s==null||s===''||s===undefined) return '\u2014';
  var n=parseFloat(s);
  if(isNaN(n)) return String(s);
  return n===0?'\u2014':'+'+n.toFixed(3);
}
function fmtT(iso){
  if(!iso) return '&#8212;';
  var d=new Date(iso);
  return ('0'+d.getHours()).slice(-2)+':'+('0'+d.getMinutes()).slice(-2)+':'+('0'+d.getSeconds()).slice(-2);
}
function tyCls(c){
  if(!c) return 'unk';
  c=c.toUpperCase();
  if(c==='SOFT') return 'soft';
  if(c==='MEDIUM') return 'medium';
  if(c==='HARD') return 'hard';
  if(c==='INTERMEDIATE') return 'inter';
  if(c==='WET') return 'wet';
  return 'unk';
}
function tyLbl(c){
  if(!c) return '?';
  c=c.toUpperCase();
  if(c==='SOFT') return 'S';
  if(c==='MEDIUM') return 'M';
  if(c==='HARD') return 'H';
  if(c==='INTERMEDIATE') return 'I';
  if(c==='WET') return 'W';
  return '?';
}
function ltCls(dn,t){
  if(!t) return '';
  if(S.fastestLap&&S.fastestLap.dn==dn&&Math.abs(t-S.fastestLap.t)<0.001) return ' tp';
  var b=S.bestLaps[dn];
  if(b&&Math.abs(t-b.t)<0.001) return ' tg';
  return '';
}

/* ══ SECTOR RENDERER ════════════════════════════════════════ */
function renderSegs(arr){
  if(!arr||!arr.length) return '';
  var h='';
  for(var i=0;i<arr.length;i++){
    var cls=SEGCLS[arr[i]]||'sn';
    h+='<span class="seg '+cls+'"></span>';
  }
  return h;
}
// Die finale renderSectors-Funktion (mit Zeitangaben)
function fmtSec(t){
  // Format sector time as SS.sss (sectors are always < 60s, except rarely)
  if(t==null||isNaN(t)) return '';
  if(t<60) return t.toFixed(3);
  var m=Math.floor(t/60); return m+':'+(t%60<10?'0':'')+(t%60).toFixed(3);
}
function renderSectors(lap, dn){
  if(!lap) return '<div class="csectors"></div>';

  var s1=lap.segments_sector_1||[];
  var s2=lap.segments_sector_2||[];
  var s3=lap.segments_sector_3||[];

  // OpenF1 correct field names: duration_sector_1/2/3
  var t1=lap.duration_sector_1||null;
  var t2=lap.duration_sector_2||null;
  var t3=lap.duration_sector_3||null;

  // Fallback: if current lap has no sector times (in-progress), use last completed lap
  if(!t1&&!t2&&!t3){
    var last=S.lastSectors&&(S.lastSectors[dn]||S.lastSectors[String(dn)]);
    if(last){
      t1=last.s1; t2=last.s2; t3=last.s3;
      s1=last.segs1||s1; s2=last.segs2||s2; s3=last.segs3||s3;
    }
  }

  // No sector times at all — show nothing (no bars, no text)
  if(!t1&&!t2&&!t3) return '<div class="csectors"></div>';

  var c1=sectorColor(dn,1,t1);
  var c2=sectorColor(dn,2,t2);
  var c3=sectorColor(dn,3,t3);

  function sCol(segs, t, cls){
    var bars=segs.length?'<div class="sg">'+renderSegs(segs)+'</div>':'<div class="sg"></div>';
    var time=t?'<span class="stime '+cls+'">'+fmtSec(t)+'</span>':'';
    return '<div class="scol">'+bars+time+'</div>';
  }

  return '<div class="csectors">'+
    sCol(s1,t1,c1)+
    '<span class="sdiv"></span>'+
    sCol(s2,t2,c2)+
    '<span class="sdiv"></span>'+
    sCol(s3,t3,c3)+
  '</div>';
}

function renderTyre(dn){
  var info=S.currentTyre[dn]||S.currentTyre[String(dn)];
  if(!info||!info.compound){
    return '<div class="ctyre"><span class="tbadge unk">?</span><span class="tage">&#8212;</span></div>';
  }
  return '<div class="ctyre">'+
    '<span class="tbadge '+tyCls(info.compound)+'">'+tyLbl(info.compound)+'</span>'+
    '<span class="tage">'+(info.age!=null?info.age+' Laps':'&#8212;')+'</span>'+
  '</div>';
}

/* ══ SECTOR TIMES ══════════════════════════════════════════════ */
function sectorColor(dn, sector, time){
  if(!time) return 'grey'; // no time = grey, not yellow

  // Overall fastest sector (purple)
  if(S.fastestSectors &&
     S.fastestSectors[sector] &&
     Math.abs(S.fastestSectors[sector].t - time) < 0.001){
    return 'purple';
  }

  // Personal best (green)
  if(S.bestSectors &&
     S.bestSectors[dn] &&
     S.bestSectors[dn][sector] &&
     Math.abs(S.bestSectors[dn][sector] - time) < 0.001){
    return 'green';
  }

  // No improvement (yellow)
  return 'yellow';
}

function computeSectorStats(){
  S.fastestSectors = {1:null,2:null,3:null};
  S.bestSectors = {};
  S.lastSectors = {};

  // Live: use ALL laps from the API response (S.allLapsFlat)
  // Replay: use RP.laps filtered to current lap (S.maxLap = n set before call)
  var allLaps;
  if(RP.active && RP.laps && RP.laps.length){
    var curN = S.maxLap;
    allLaps = RP.laps.filter(function(l){ return (l.lap_number||0) <= curN; });
  } else {
    allLaps = S.allLapsFlat && S.allLapsFlat.length ? S.allLapsFlat : Object.values(S.laps);
  }

  // Sort ascending so lastSectors ends up with most recent completed lap
  allLaps = allLaps.slice().sort(function(a,b){ return (a.lap_number||0)-(b.lap_number||0); });

  for(var i=0;i<allLaps.length;i++){
    var lap = allLaps[i];
    var dn = lap.driver_number;
    if(!dn) continue;

    var t1 = lap.duration_sector_1||null;
    var t2 = lap.duration_sector_2||null;
    var t3 = lap.duration_sector_3||null;
    if(!t1&&!t2&&!t3) continue; // skip laps with no sector data

    if(!S.bestSectors[dn]) S.bestSectors[dn] = {1:null,2:null,3:null};

    if(t1 && (!S.bestSectors[dn][1] || t1 < S.bestSectors[dn][1])) S.bestSectors[dn][1] = t1;
    if(t2 && (!S.bestSectors[dn][2] || t2 < S.bestSectors[dn][2])) S.bestSectors[dn][2] = t2;
    if(t3 && (!S.bestSectors[dn][3] || t3 < S.bestSectors[dn][3])) S.bestSectors[dn][3] = t3;

    if(t1 && (!S.fastestSectors[1] || t1 < S.fastestSectors[1].t)) S.fastestSectors[1] = {t:t1, dn:dn};
    if(t2 && (!S.fastestSectors[2] || t2 < S.fastestSectors[2].t)) S.fastestSectors[2] = {t:t2, dn:dn};
    if(t3 && (!S.fastestSectors[3] || t3 < S.fastestSectors[3].t)) S.fastestSectors[3] = {t:t3, dn:dn};

    // lastSectors = most recent completed lap's sector times per driver
    S.lastSectors[dn]={
      s1:t1, s2:t2, s3:t3,
      segs1:lap.segments_sector_1||[],
      segs2:lap.segments_sector_2||[],
      segs3:lap.segments_sector_3||[]
    };
  }
}
// Verbesserte fetchJSON mit exponentiellem Backoff bei 429 (max. 3 Versuche)
function fetchJSON(url, retries) {
  if(retries===undefined) retries=1; // 1 retry for live polling; pass higher for session loads
  function attempt(n) {
    return fetch(url).then(function(r) {
      if (r.status === 429 && n < retries) {
        var delay = n===0 ? 2000 : 4000;
        return new Promise(function(ok) { setTimeout(ok, delay); })
               .then(function() { return attempt(n + 1); });
      }
      if (!r.ok) throw new Error('HTTP ' + r.status);
      return r.json();
    });
  }
  return attempt(0);
}
function apiFetch(ep,extra,key){
  var sk;
  if(key!=null){sk=key;}
  else if(IS_LV){sk=(CURSK&&CURSK!==0)?CURSK:'latest';}
  else{sk=CURSK;}
  var url=PROXY_URL+encodeURIComponent(ep)+'&session_key='+encodeURIComponent(sk);
  if(extra){var ks=Object.keys(extra);for(var i=0;i<ks.length;i++){url+='&'+encodeURIComponent(ks[i])+'='+encodeURIComponent(extra[ks[i]]);}}
  return fetchJSON(url);
}
function apiFetchRaw(ep,params){
  var url=PROXY_URL+encodeURIComponent(ep)+'&';
  var ks=Object.keys(params||{});
  var parts=[];
  for(var i=0;i<ks.length;i++){parts.push(encodeURIComponent(ks[i])+'='+encodeURIComponent(params[ks[i]]));}
  url+=parts.join('&');
  return fetchJSON(url, 2); // 2 retries for browser/session loading
}
function pAll(ps){return Promise.all(ps.map(function(p){return p.then(function(v){return{ok:true,v:v};},function(e){return{ok:false,e:e,v:[]};});}));}

/* ══ LIVE FETCH ═════════════════════════════════════════════ */
function fetchAll(){
  setSpinning(true);
  pAll([
    apiFetch('/position'),
    apiFetch('/laps'),
    apiFetch('/intervals'),
    apiFetch('/pit'),
    apiFetch('/stints'),
    apiFetch('/weather'),
    apiFetch('/race_control'),
  ]).then(function(res){
    processPositions(res[0]);
    processLaps(res[1]);
    processIntervals(res[2]);
    processPits(res[3]);
    processStints(res[4]);
    processWeather(res[5]);
    processRC(res[6]);

    // If RC came back empty, try a direct fetch without session_key constraint
    if(!res[6].ok || !res[6].v.length){
      var rcUrl = IS_LV
        ? PROXY_URL+encodeURIComponent('/race_control')+'&session_key=latest'
        : PROXY_URL+encodeURIComponent('/race_control')+'&session_key='+encodeURIComponent(CURSK);
      fetchJSON(rcUrl).then(function(v){
        if(v&&v.length){ S.raceControl=v.slice().reverse(); updateRC(); }
      }).catch(function(){});
    }

    // If DRV is still empty (drivers not yet loaded), fetch them now and re-render
    if(Object.keys(DRV).length === 0 && CURSK){
      fetchJSON(PROXY_URL+encodeURIComponent('/drivers')+'&session_key='+CURSK)
        .then(function(arr){
          if(arr&&arr.length){arr.forEach(function(d){DRV[d.driver_number]=d;DRV[String(d.driver_number)]=d;});}
          updateDOM();
        }).catch(function(){ updateDOM(); });
    } else {
      updateDOM();
    }
    setStatus(true);
  }).catch(function(e){setStatus(false,e.message);}).then(function(){setSpinning(false);});
}

function processPositions(r){
  if(!r.ok) return;
  // When there's no active live session, ignore historical REST position data
  if(IS_NO_SESSION && IS_LV && !RP.active) return;
  var pm={};
  r.v.forEach(function(p){if(!pm[p.driver_number]||p.date>pm[p.driver_number].date)pm[p.driver_number]=p;});
  S._restPos=pm; // store REST snapshot as complete 20-driver baseline
  // Merge: REST provides all drivers, MQTT overrides with fresher positions
  var merged=Object.assign({},pm);
  if(S._mpos) Object.keys(S._mpos).forEach(function(dn){ merged[dn]=S._mpos[dn]; });
  S.positions=Object.values(merged).sort(function(a,b){return a.position-b.position;});
  // Record starting grid first time we get positions (live mode only)
  if(!RP.active && !S.startGrid && S.positions.length > 0){
    S.startGrid={};
    S.positions.forEach(function(p){ S.startGrid[String(p.driver_number)]=p.position; });
  }
}
function processLaps(r){
  if(!r.ok) return;
  if(!r.v.length) return; // don't wipe MQTT-sourced lap data with an empty REST response
  S.laps={};S.bestLaps={};S.completedLaps={};
  S.allLapsFlat = r.v.slice(); // store ALL laps for sector stats (not just latest per driver)
  var ft=Infinity,fd=null;
  r.v.forEach(function(l){
    var dn=l.driver_number;
    if(!S.laps[dn]||l.lap_number>S.laps[dn].lap_number) S.laps[dn]=l;
    if(l.lap_duration){
      if(l.lap_duration<ft){ft=l.lap_duration;fd=dn;}
      if(!S.bestLaps[dn]||l.lap_duration<S.bestLaps[dn].t) S.bestLaps[dn]={t:l.lap_duration,n:l.lap_number||0};
      // Track latest COMPLETED lap (has duration) separately from in-progress lap
      if(!S.completedLaps[dn]||l.lap_number>S.completedLaps[dn].lap_number) S.completedLaps[dn]=l;
    }
  });
  S.fastestLap=fd?{dn:fd,t:ft}:null;
  var ns=r.v.map(function(l){return l.lap_number||0;});
  S.maxLap=ns.length?Math.max.apply(null,ns):0;
  // Sektorstatistiken neu berechnen
  computeSectorStats();
}
function processIntervals(r){
  if(!r.ok) return;
  S.intervals={};
  r.v.forEach(function(iv){
    var dn=iv.driver_number;
    if(!S.intervals[dn]||iv.date>S.intervals[dn].date){
      S.intervals[dn]=iv;
      S.intervals[String(dn)]=iv;
    }
  });
}
function processPits(r){
  if(!r.ok) return;
  if(!r.v.length) return; // don't wipe existing pit data with empty response
  S.pits={};
  r.v.forEach(function(p){
    var dn=p.driver_number;
    S.pits[dn]=(S.pits[dn]||0)+1;
    S.pits[String(dn)]=S.pits[dn];
  });
}
function processStints(r){
  if(!r.ok) return;
  if(!r.v.length) return; // don't wipe existing tyre data with empty response
  var stintMap={};
  r.v.forEach(function(st){var dn=st.driver_number;if(!stintMap[dn])stintMap[dn]=[];stintMap[dn].push(st);});
  S.currentTyre={};
  var dks=Object.keys(stintMap);
  dks.forEach(function(dn){
    var arr=stintMap[dn];
    arr.sort(function(a,b){return a.stint_number-b.stint_number;});
    var last=arr[arr.length-1];
    var age=(last.tyre_age_at_start||0)+(S.maxLap-last.lap_start);
    if(age<0)age=0;
    S.currentTyre[dn]={compound:last.compound,age:age};
  });
}
function processWeather(r){if(r.ok&&r.v.length)S.weather=r.v[r.v.length-1];}
function processRC(r){if(r.ok&&r.v.length) S.raceControl=r.v.slice().reverse();}

/* ══ API FETCH ══════════════════════════════════════════════ */
// Add seconds to an ISO date string
function addSecs(iso,s){
  if(!iso) return null;
  try{return new Date(new Date(iso).getTime()+s*1000).toISOString();}
  catch(e){return iso;}
}
function byDate(arr){arr.sort(function(a,b){return (a.date||'').localeCompare(b.date||'');});}

/* ══ MQTT / WEBSOCKET ════════════════════════════════════════
   Real-time push data for OpenF1 sponsor accounts.
   Falls back to REST polling when no token or no connection.
   ════════════════════════════════════════════════════════════ */
var MQTT_CLIENT  = null;
var MQTT_ACTIVE  = false;
var _domThrottle = null;

// Load mqtt.js dynamically — only when token is available, non-blocking
function loadMqttJs(callback){
  if(typeof mqtt !== 'undefined'){ callback(); return; }
  var s=document.createElement('script');
  s.src='https://unpkg.com/mqtt/dist/mqtt.min.js';
  s.async=true;
  s.onload=function(){ console.log('[MQTT] mqtt.js loaded'); callback(); };
  s.onerror=function(){ console.warn('[MQTT] mqtt.js failed to load'); };
  document.head.appendChild(s);
}

// ── Live starting grid: fetch qualifying session positions for GAINED ─────────
// Called once when a live Race/Sprint session is detected.
// Finds the preceding Qualifying/Sprint Qualifying session and uses its
// finishing positions as S.startGrid so GAINED works in live mode.
function loadLiveStartingGrid(){
  if(!MEETING_KEY) return;
  var stype = SESSION_TYPE.toLowerCase();
  var isRaceType = stype.indexOf('race')!==-1 || (stype.indexOf('sprint')!==-1 && stype.indexOf('shootout')===-1 && stype.indexOf('qualifying')===-1);
  if(!isRaceType) return;

  // Find qualifying/sprint qualifying session for this meeting
  fetchJSON(PROXY_URL+encodeURIComponent('/sessions')+'&meeting_key='+MEETING_KEY)
    .then(function(sessions){
      if(!Array.isArray(sessions)||!sessions.length) return;
      var wantTypes = stype.indexOf('sprint')!==-1
        ? ['sprint shootout','sprint qualifying','shootout']
        : ['qualifying'];
      var cands = sessions.filter(function(s){
        var sn=(s.session_name||'').toLowerCase();
        var st=(s.session_type||'').toLowerCase();
        return wantTypes.some(function(t){ return sn.indexOf(t)!==-1||st.indexOf(t)!==-1; })
               && parseInt(s.session_key,10) < LIVESK;
      });
      if(!cands.length) return;
      cands.sort(function(a,b){ return parseInt(b.session_key,10)-parseInt(a.session_key,10); });
      var qualSK = parseInt(cands[0].session_key, 10);

      // Fetch qualifying lap times → derive grid order from best lap per driver
      return fetchJSON(PROXY_URL+encodeURIComponent('/laps')+'&session_key='+qualSK)
        .then(function(laps){
          if(!Array.isArray(laps)||!laps.length) return;
          var best={};
          laps.forEach(function(l){
            var dn=l.driver_number;
            if(l.lap_duration && (!best[dn]||l.lap_duration<best[dn])) best[dn]=l.lap_duration;
          });
          var sorted=Object.keys(best).map(function(dn){ return {dn:parseInt(dn,10),t:best[dn]}; })
                       .sort(function(a,b){ return a.t-b.t; });
          if(sorted.length < 10) return;
          S.startGrid={};
          sorted.forEach(function(item,i){ S.startGrid[String(item.dn)]=i+1; S.startGrid[item.dn]=i+1; });
          triggerUpdate(); // re-render GAINED cells
        });
    }).catch(function(){});
}

var _rafPending = false;
function triggerUpdate(){
  if(_domThrottle) return;
  _domThrottle = setTimeout(function(){
    _domThrottle = null;
    if(!_rafPending){
      _rafPending = true;
      requestAnimationFrame(function(){
        _rafPending = false;
        computeSectorStats();
        updateDOM();
      });
    }
  }, 600);
}

function startMQTT(){
  if(!MQTT_TOKEN || !IS_LV) return false;
  loadMqttJs(function(){
    if(typeof mqtt === 'undefined'){ console.warn('[MQTT] mqtt.js unavailable'); startLiveREST(); return; }
    stopMQTT();
  var client = mqtt.connect(MQTT_URL, {
    username: MQTT_USER,
    password: MQTT_TOKEN,
    reconnectPeriod: 6000,
    connectTimeout: 12000,
    keepalive: 30,
  });
  client.on('connect', function(){
    MQTT_ACTIVE = true;
    fetchAll(); // initial REST fetch for current state
    var topics = ['v1/position','v1/laps','v1/intervals','v1/pit','v1/stints','v1/weather','v1/race_control'];
    topics.forEach(function(t){ client.subscribe(t); });
    setStatus(true, 'WebSocket connected \u00B7 real-time');
    console.log('[MQTT] connected');
  });
  client.on('message', function(topic, message){
    if(!IS_LV || !MQTT_ACTIVE) return;
    var data; try{ data=JSON.parse(message.toString()); }catch(e){ return; }
    handleMQTTMessage(topic, data);
  });
  client.on('error', function(err){
    console.warn('[MQTT] error:', err.message||err);
    MQTT_ACTIVE = false;
    if(IS_LV && !RP.active) startLiveREST();
  });
  client.on('close', function(){
    if(MQTT_ACTIVE){ MQTT_ACTIVE=false; console.log('[MQTT] closed — REST fallback'); if(IS_LV && !RP.active) startLiveREST(); }
  });
  MQTT_CLIENT = client;
  }); // end loadMqttJs
  return true;
}

function stopMQTT(){
  MQTT_ACTIVE = false;
  if(MQTT_CLIENT){ try{ MQTT_CLIENT.end(true); }catch(e){} MQTT_CLIENT = null; }
}

function handleMQTTMessage(topic, data){
  var dn = data.driver_number;
  switch(topic){
    case 'v1/position':
      if(!S._mpos) S._mpos={};
      if(!S._mpos[dn]||(data._id||0)>(S._mpos[dn]._id||0)){
        S._mpos[dn]=data;
        // Merge: keep REST baseline for all drivers, override with MQTT for known drivers
        var merged=Object.assign({},S._restPos||{});
        Object.keys(S._mpos).forEach(function(k){ merged[k]=S._mpos[k]; });
        S.positions=Object.values(merged).sort(function(a,b){return a.position-b.position;});
      }
      break;
    case 'v1/laps':
      var cur=S.laps[dn];
      if(!cur||data.lap_number>cur.lap_number||(data.lap_number===cur.lap_number&&(data._id||0)>(cur._id||0))){
        S.laps[dn]=data;
        if((data.lap_number||0)>S.maxLap) S.maxLap=data.lap_number;
        if(data.lap_duration){
          if(!S.bestLaps[dn]||data.lap_duration<S.bestLaps[dn].t) S.bestLaps[dn]={t:data.lap_duration,n:data.lap_number||0};
          if(!S.fastestLap||data.lap_duration<S.fastestLap.t) S.fastestLap={dn:dn,t:data.lap_duration};
          // Track latest completed lap
          if(!S.completedLaps[dn]||data.lap_number>S.completedLaps[dn].lap_number) S.completedLaps[dn]=data;
        }
        if(!S.allLapsFlat) S.allLapsFlat=[];
        var found=false;
        for(var i=0;i<S.allLapsFlat.length;i++){
          if(S.allLapsFlat[i].driver_number===dn&&S.allLapsFlat[i].lap_number===data.lap_number){S.allLapsFlat[i]=data;found=true;break;}
        }
        if(!found) S.allLapsFlat.push(data);
      }
      break;
    case 'v1/intervals':
      if(!S.intervals[dn]||(data._id||0)>(S.intervals[dn]._id||0)){ S.intervals[dn]=data; S.intervals[String(dn)]=data; }
      break;
    case 'v1/pit':
      if(!S._mpits) S._mpits={};
      var pkey=dn+'_'+(data.lap_number||data._id);
      if(!S._mpits[pkey]){ S._mpits[pkey]=true; S.pits[dn]=(S.pits[dn]||0)+1; S.pits[String(dn)]=S.pits[dn]; }
      break;
    case 'v1/stints':
      if(!S._mstints) S._mstints={};
      var skey=dn+'_'+(data.stint_number||0);
      S._mstints[skey]=data;
      var driverLatest={};
      Object.values(S._mstints).forEach(function(st){
        var d=st.driver_number;
        if(!driverLatest[d]||st.stint_number>driverLatest[d].stint_number) driverLatest[d]=st;
      });
      Object.keys(driverLatest).forEach(function(d){
        var last=driverLatest[d];
        var age=(last.tyre_age_at_start||0)+((S.maxLap||0)-(last.lap_start||0));
        if(age<0) age=0;
        var info={compound:last.compound,age:age};
        S.currentTyre[d]=info; S.currentTyre[String(d)]=info;
      });
      return; // tyre only, no full DOM update
    case 'v1/weather':
      if(!S.weather||(data._id||0)>(S.weather._id||0)) S.weather=data;
      break;
    case 'v1/race_control':
      if(!S._mrc) S._mrc={};
      var rcid=data._id||(data.date+'_'+data.message);
      if(!S._mrc[rcid]){ S._mrc[rcid]=true; S.raceControl.unshift(data); if(S.raceControl.length>150) S.raceControl.length=150; updateRC(); }
      return;
    default: return;
  }
  triggerUpdate();
}

/* ══ REPLAY LOAD ════════════════════════════════════════════ */
function loadSessionForReplay(sk, sessionMeta, allMeetingSessions){
  setSpinning(true);
  document.getElementById('br-loading').style.display='inline';
  document.getElementById('btn-load').disabled=true;

  // Stop live polling IMMEDIATELY
  stopLive();
  IS_LV = false;

  // ── Step 1: Load drivers FIRST ────────────
  var _prevDRV = DRV; // keep previous drivers as fallback
  DRV = {};
  fetchJSON(PROXY_URL+encodeURIComponent('/drivers')+'&session_key='+encodeURIComponent(sk))
    .then(function(arr){
      if(arr && arr.length){
        var valid = arr.filter(function(d){ return d && d.driver_number; });
        if(valid.length){
          valid.forEach(function(d){
            DRV[d.driver_number]        = d;
            DRV[String(d.driver_number)]= d;
          });
          return;
        }
      }
      // Fallback: restore previous drivers if fetch failed or empty
      DRV = _prevDRV;
    })
    .catch(function(){ DRV = _prevDRV; })
    .catch(function(){})
    .then(function(){
      // ── Step 2: Load all session data in parallel (pAll) ─────────────
      return pAll([
        apiFetch('/laps',null,sk),
        apiFetch('/stints',null,sk),
        apiFetch('/race_control',null,sk),
        apiFetch('/weather',null,sk),
        apiFetch('/position',null,sk),
        apiFetch('/intervals',null,sk),
        apiFetch('/pit',null,sk),
      ]);
    })
    .then(function(res){

    RP.laps      = res[0].ok?res[0].v:[];
    RP.stints    = res[1].ok?res[1].v:[];
    RP.rc        = res[2].ok?res[2].v:[];
    RP.wx        = res[3].ok?res[3].v:[];
    RP.pos       = res[4].ok?res[4].v:[];
    RP.intervals = res[5].ok?res[5].v:[];
    RP.pits      = res[6].ok?res[6].v:[];

    byDate(RP.rc); byDate(RP.wx);

    // Per-driver sorted arrays for position + interval data
    RP.posByDrv={};
    RP.pos.forEach(function(p){
      var dn=String(p.driver_number);
      if(!RP.posByDrv[dn]) RP.posByDrv[dn]=[];
      RP.posByDrv[dn].push(p);
    });
    Object.keys(RP.posByDrv).forEach(function(dn){
      RP.posByDrv[dn].sort(function(a,b){return (a.date||'').localeCompare(b.date||'');});
    });

    RP.ivByDrv={};
    RP.intervals.forEach(function(iv){
      var dn=String(iv.driver_number);
      if(!RP.ivByDrv[dn]) RP.ivByDrv[dn]=[];
      RP.ivByDrv[dn].push(iv);
    });
    Object.keys(RP.ivByDrv).forEach(function(dn){
      RP.ivByDrv[dn].sort(function(a,b){return (a.date||'').localeCompare(b.date||'');});
    });

    // Per-lap, per-driver date_end index
    RP.lapEnd={};
    RP.laps.forEach(function(l){
      if(!l.lap_number||!l.date_end) return;
      var n=l.lap_number, dn=String(l.driver_number);
      if(!RP.lapEnd[n]) RP.lapEnd[n]={};
      RP.lapEnd[n][dn]=l.date_end;
    });

    // Global cutoff per lap = MEDIAN date_end + 90 second buffer
    RP.lapCutoff={};
    Object.keys(RP.lapEnd).forEach(function(n){
      var dates=Object.keys(RP.lapEnd[n]).map(function(dn){
        return RP.lapEnd[n][dn];
      }).filter(Boolean).sort();
      if(!dates.length) return;
      RP.lapCutoff[n]=addSecs(dates[Math.floor(dates.length/2)], 90);
    });

    // RC timeline: earliest date_start per lap
    RP.lapStartDate={};
    RP.laps.forEach(function(l){
      if(!l.lap_number||!l.date_start) return;
      var n=l.lap_number;
      if(!RP.lapStartDate[n]||l.date_start<RP.lapStartDate[n]){
        RP.lapStartDate[n]=l.date_start;
      }
    });

    var ns=RP.laps.map(function(l){return l.lap_number||0;});
    RP.max=ns.length?Math.max.apply(null,ns):0;
    RP.year = sessionMeta && sessionMeta.date_start
      ? parseInt(sessionMeta.date_start.substring(0,4),10) : 0;
    S.totalLaps = sessionMeta && (sessionMeta.total_laps||sessionMeta.number_of_laps)
      ? parseInt(sessionMeta.total_laps||sessionMeta.number_of_laps,10) : RP.max;
    RP.cur=1; RP.active=true; IS_LV=false; CURSK=sk;
    document.getElementById('skey').textContent=sk;

    document.getElementById('live-badge').className='live-badge replay';
    document.getElementById('lbt').textContent='REPLAY';
    document.getElementById('replay-bar').className='replay-bar on';

    // Update session-type badge with the replay session's type
    if(sessionMeta){
      var replayType=(sessionMeta.session_type||sessionMeta.session_name||'SESSION').toUpperCase();
      var badgeEl=document.getElementById('hdr-badge');
      if(badgeEl){
        badgeEl.textContent=replayType;
        var rt=replayType.toLowerCase();
        badgeEl.className='h-badge'+(rt.indexOf('race')!==-1?' race':rt.indexOf('qual')!==-1?' qualify':rt.indexOf('practice')!==-1?' practice':'');
      }
    }
    document.getElementById('replay-bar').className='replay-bar on';
    var sl=document.getElementById('rp-slider');
    sl.min=1; sl.max=RP.max; sl.value=1;

    stopLive(); closeBrowser();

    // ── Determine starting grid from qualifying / shootout ────────────────
    RP.gridOrder = {};
    var stype = sessionMeta && sessionMeta.session_type ? sessionMeta.session_type.toLowerCase() : '';
    var isRaceOrSprint = stype.indexOf('race')!==-1 || (stype.indexOf('sprint')!==-1 && stype.indexOf('shootout')===-1);

    var gridSK = null;
    if(isRaceOrSprint && allMeetingSessions && allMeetingSessions.length){
      var wantTypes = (stype.indexOf('sprint')!==-1 && stype.indexOf('race')===-1)
        ? ['sprint shootout','shootout','sprint qualifying']
        : ['qualifying'];
      var cands = [];
      allMeetingSessions.forEach(function(s){
        var sn=(s.session_name||'').toLowerCase();
        var st=(s.session_type||'').toLowerCase();
        var match=false;
        wantTypes.forEach(function(t){if(sn.indexOf(t)!==-1||st.indexOf(t)!==-1) match=true;});
        if(match && parseInt(s.session_key,10) < sk) cands.push(s);
      });
      if(cands.length){
        cands.sort(function(a,b){return parseInt(b.session_key,10)-parseInt(a.session_key,10);});
        gridSK = cands[0].session_key;
      }
    }

    function buildGridFromPositions(posList){
      var allPos = posList.slice().sort(function(a,b){
        return (a.date||'').localeCompare(b.date||'');
      });
      var snap = {}, snapDate = null;
      for(var pi=0; pi<allPos.length; pi++){
        var p = allPos[pi];
        snap[p.driver_number] = p;
        if(Object.keys(snap).length >= 15 && !snapDate){
          snapDate = addSecs(p.date, 10);
        }
        if(snapDate && (p.date||'') > snapDate) break;
      }
      var result = Object.keys(snap).map(function(dn){
        return {driver_number:parseInt(dn,10), position:snap[dn].position};
      }).sort(function(a,b){ return a.position - b.position; });
      return result;
    }

    var raceGridSnap = buildGridFromPositions(RP.pos);
    var gridPromise = Promise.resolve();

    function finalizeRender(){
      RP.showGrid = (RP.gridPositions.length > 0);
      if(RP.showGrid){
        showGridState();
        setStatus(true,'Historical session loaded · '+RP.laps.length+' laps · Starting grid shown · Press Play');
      } else {
        renderReplayLap(1);
        setStatus(true,'Historical session loaded · '+RP.laps.length+' laps');
      }
    }

    if(raceGridSnap.length >= 15){
      RP.gridPositions = raceGridSnap;
      raceGridSnap.forEach(function(item){
        RP.gridOrder[item.driver_number] = item.position;
        RP.gridOrder[String(item.driver_number)] = item.position;
      });
      finalizeRender();
    } else if(gridSK){
      // Qualifying-Daten asynchron laden, aber vor dem ersten Rendern warten
      gridPromise = apiFetch('/laps', null, gridSK).then(function(ql){
        return apiFetch('/drivers', null, gridSK).then(function(qd){
          qd.forEach(function(d){
            if(!DRV[d.driver_number]) DRV[d.driver_number] = d;
            if(!DRV[String(d.driver_number)]) DRV[String(d.driver_number)] = d;
          });
          return ql;
        }).catch(function(){ return ql; });
      }).then(function(ql){
        var best = {};
        ql.forEach(function(l){
          var dn = l.driver_number;
          if(l.lap_duration && (!best[dn] || l.lap_duration < best[dn])){
            best[dn] = l.lap_duration;
          }
        });
        var sorted = Object.keys(best).map(function(dn){
          return {driver_number:parseInt(dn,10), position:0, _t:best[dn]};
        }).sort(function(a,b){ return a._t - b._t; });
        sorted.forEach(function(item,i){ item.position = i+1; });
        if(sorted.length >= 10){
          RP.gridPositions = sorted;
          sorted.forEach(function(item){
            RP.gridOrder[item.driver_number] = item.position;
            RP.gridOrder[String(item.driver_number)] = item.position;
          });
        }
      }).catch(function(){});
    }

    // Warte auf Grid-Daten, bevor gerendert wird
    gridPromise.then(function(){
      finalizeRender();
    });

    // Wenn RC leer, später nachladen
    if(!RP.rc.length){
      function fetchRC(attempt){
        var delay = attempt === 0 ? 800 : attempt * 1500;
        setTimeout(function(){
          fetchJSON(PROXY_URL+encodeURIComponent('/race_control')+'&session_key='+encodeURIComponent(sk))
            .then(function(v){
              if(v && v.length){ RP.rc=v; byDate(RP.rc); renderReplayLapRC(RP.cur); }
              else if(attempt < 2){ fetchRC(attempt + 1); }
            })
            .catch(function(){ if(attempt < 2) fetchRC(attempt + 1); });
        }, delay);
      }
      fetchRC(0);
    }

  }).catch(function(e){
    setStatus(false,e.message); console.error('Replay load error',e);
  }).then(function(){
    setSpinning(false);
    document.getElementById('br-loading').style.display='none';
    document.getElementById('btn-load').disabled=false;
  });
}

// Display the qualifying starting grid without any race data
function showGridState(){
  _towerRows={}; _cellCache={}; _towerReady=false; _rcLastCount=-1; S._restPos={}; S._mpos={}; S.startGrid=null; // clear caches for new session
  document.getElementById('rows').innerHTML='';
  S.positions  = RP.gridPositions.slice();
  S.laps       = {};
  S.bestLaps   = {};
  S.intervals  = {};
  S.pits       = {};
  S.fastestLap = null;
  S.maxLap     = 0;
  var raceStartDate = RP.lapStartDate[1] || RP.lapCutoff[0] || null;
  var raceStartMs = raceStartDate ? Date.parse(raceStartDate) : null;
  var rcPre = [];
  for(var i=0; i<RP.rc.length; i++){
    var rcm = RP.rc[i];
    var msgLap = (rcm.lap_number != null && rcm.lap_number !== '') ? parseInt(rcm.lap_number, 10) : null;
    if(msgLap !== null && !isNaN(msgLap)){
      if(msgLap === 0) rcPre.push(rcm);
    } else if(raceStartMs){
      var msgMs = rcm.date ? Date.parse(rcm.date) : null;
      if(msgMs && msgMs <= raceStartMs) rcPre.push(rcm);
    }
  }
  S.raceControl = rcPre.slice().reverse();
  S.weather    = RP.wx.length ? RP.wx[0] : null;

  S.currentTyre = {};
  RP.stints.forEach(function(st){
    if(st.stint_number === 1){
      var dn = st.driver_number;
      S.currentTyre[dn] = {compound: st.compound, age: st.tyre_age_at_start || 0, _sn: 1};
      S.currentTyre[String(dn)] = S.currentTyre[dn];
    }
  });

  document.getElementById('lap-ctr').textContent =
    'STARTING GRID' + (S.totalLaps > 0 ? ' / ' + S.totalLaps + ' laps' : '');
  document.getElementById('rp-slider').value = 1;
  document.getElementById('rp-lap').textContent = 'Grid / Lap 1';
  updateTower();
  updateWeather();
  updateRC();
  updateFL();
  updateDNF();
}

function renderReplayLapRC(n){
  var rcCutoff = RP.lapStartDate[n+1]
    || RP.lapCutoff[n] || RP.lapCutoff[n-1]
    || RP.lapStartDate[n] || null;
  var cutoffMs = rcCutoff ? Date.parse(rcCutoff) : null;
  var rcFiltered = [];
  for(var ri=0; ri<RP.rc.length; ri++){
    var rcm = RP.rc[ri];
    var msgLap = (rcm.lap_number !== null && rcm.lap_number !== undefined && rcm.lap_number !== '')
                 ? parseInt(rcm.lap_number, 10) : null;
    if(msgLap !== null && !isNaN(msgLap)){
      if(msgLap <= n) rcFiltered.push(rcm);
    } else if(cutoffMs){
      var msgMs = rcm.date ? Date.parse(rcm.date) : null;
      if(msgMs && msgMs <= cutoffMs) rcFiltered.push(rcm);
    } else {
      rcFiltered.push(rcm);
    }
  }
  S.raceControl = rcFiltered.slice().reverse();
  updateRC();
}

function renderReplayLap(n){
  RP.cur=n;
  document.getElementById('rp-slider').value=n;
  document.getElementById('rp-lap').textContent='Lap '+n+' / '+RP.max;

  function latestBefore(arr,cutoff){
    if(!arr||!arr.length) return null;
    if(!cutoff) return arr[arr.length-1];
    for(var i=arr.length-1;i>=0;i--){
      if((arr[i].date||'')<=cutoff) return arr[i];
    }
    return null;
  }

  // Global cutoff = median lap-end + 90s buffer (falls nicht vorhanden, wird später geschätzt)
  var globalCutoff=RP.lapCutoff[n]||RP.lapCutoff[n-1]||null;

  // ── 1. Lap data up to N ───────────────────────────────────────────────
  S.laps={}; S.bestLaps={};
  var ft=Infinity, fd=null;
  RP.laps.forEach(function(l){
    if(l.lap_number>n) return;
    var dn=l.driver_number;
    if(!S.laps[dn]||l.lap_number>S.laps[dn].lap_number) S.laps[dn]=l;
    if(l.lap_duration&&l.lap_duration<ft){ft=l.lap_duration;fd=dn;}
    if(l.lap_duration&&(!S.bestLaps[dn]||l.lap_duration<S.bestLaps[dn].t)){S.bestLaps[dn]={t:l.lap_duration,n:l.lap_number||0};}
  });
  S.fastestLap=fd?{dn:fd,t:ft}:null;
  S.maxLap=n;
  computeSectorStats(); // Aktualisiere Sektorstatistiken für diese Runde

  var allDrvs={};
  Object.keys(RP.posByDrv).forEach(function(dn){allDrvs[dn]=1;});
  Object.keys(S.laps).forEach(function(dn){allDrvs[String(dn)]=1;});

  // ── 2. Positions ─────────────────────────────────────────────────────
  var posArr=[];

  if(n===1){
    var hasGrid = Object.keys(RP.gridOrder).length > 0;
    if(hasGrid){
      Object.keys(allDrvs).forEach(function(dnStr){
        var dn=parseInt(dnStr,10);
        var gp=RP.gridOrder[dn]||RP.gridOrder[dnStr];
        if(gp) posArr.push({driver_number:dn, position:gp});
      });
      var maxGP=posArr.length;
      Object.keys(allDrvs).forEach(function(dnStr){
        var dn=parseInt(dnStr,10);
        if(!RP.gridOrder[dn]&&!RP.gridOrder[dnStr]){
          maxGP++;
          posArr.push({driver_number:dn,position:maxGP});
        }
      });
    } else {
      Object.keys(allDrvs).forEach(function(dnStr){
        var dn=parseInt(dnStr,10);
        var arr=RP.posByDrv[dnStr];
        if(!arr||!arr.length) return;
        posArr.push({driver_number:dn, position:arr[0].position});
      });
    }
    if(posArr.length) posArr.sort(function(a,b){return a.position-b.position;});
  }

  if(!posArr.length){
    Object.keys(allDrvs).forEach(function(dnStr){
      var dn=parseInt(dnStr,10);
      var arr=RP.posByDrv[dnStr];
      var entry=null;

      var ownEnd=RP.lapEnd[n]&&RP.lapEnd[n][dnStr] ? addSecs(RP.lapEnd[n][dnStr],90) : null;
      if(ownEnd) entry=latestBefore(arr,ownEnd);
      if(!entry && globalCutoff) entry=latestBefore(arr,globalCutoff);
      
      // Falls immer noch kein Cutoff, aber wir haben einen Lap für diesen Fahrer?
      if(!entry && S.laps[dn] && S.laps[dn].date_start) {
        // Schätze Rundenende: Startzeit + Rundenzeit (oder +120s)
        var lapObj = S.laps[dn];
        var estDuration = (lapObj.lap_duration ? lapObj.lap_duration : 120);
        var estEnd = new Date(lapObj.date_start).getTime() + estDuration * 1000;
        var estCutoff = new Date(estEnd + 90*1000).toISOString();
        entry = latestBefore(arr, estCutoff);
      }
      
      if(!entry && arr && arr.length) entry=arr[arr.length-1];
      if(entry) posArr.push({driver_number:dn, position:entry.position});
    });

    if(posArr.length){
      posArr.sort(function(a,b){return a.position-b.position;});
    } else {
      var cumT={}, lapCnt={};
      RP.laps.forEach(function(l){
        if(l.lap_number>n) return;
        var dn=l.driver_number;
        lapCnt[dn]=Math.max(lapCnt[dn]||0,l.lap_number||0);
        if(l.lap_duration) cumT[dn]=(cumT[dn]||0)+l.lap_duration;
      });
      var dnList=Object.keys(lapCnt).map(Number);
      dnList.sort(function(a,b){
        var lc=lapCnt[b]-lapCnt[a];
        return lc!==0?lc:(cumT[a]||0)-(cumT[b]||0);
      });
      posArr=dnList.map(function(dn,i){return{driver_number:dn,position:i+1};});
    }
  }
  S.positions=posArr;

  // ── 3. Intervals ─────────────────────────────────────────────────────
  S.intervals={};
  Object.keys(allDrvs).forEach(function(dnStr){
    var dn=parseInt(dnStr,10);
    var arr=RP.ivByDrv[dnStr];
    var entry=null;
    var ownEnd=RP.lapEnd[n]&&RP.lapEnd[n][dnStr] ? addSecs(RP.lapEnd[n][dnStr],90) : null;
    if(ownEnd) entry=latestBefore(arr,ownEnd);
    if(!entry && globalCutoff) entry=latestBefore(arr,globalCutoff);
    if(!entry && S.laps[dn] && S.laps[dn].date_start) {
      var lapObj = S.laps[dn];
      var estDuration = (lapObj.lap_duration ? lapObj.lap_duration : 120);
      var estEnd = new Date(lapObj.date_start).getTime() + estDuration * 1000;
      var estCutoff = new Date(estEnd + 90*1000).toISOString();
      entry = latestBefore(arr, estCutoff);
    }
    if(!entry && arr&&arr.length) entry=arr[arr.length-1];
    if(entry) S.intervals[dn]={gap_to_leader:entry.gap_to_leader,interval:entry.interval};
  });

  // ── 4. Pit counts ───────────────────────────────────────────────────
  S.pits={};
  RP.pits.forEach(function(p){
    if((p.lap_number||0)<=n){
      var dn=p.driver_number;
      S.pits[dn]=(S.pits[dn]||0)+1;
    }
  });

  // ── 5. Tyres ───────────────────────────────────────────────────────
  S.currentTyre={};
  RP.stints.forEach(function(st){
    if(st.lap_start<=n){
      var dn=st.driver_number;
      if(!S.currentTyre[dn]||st.stint_number>(S.currentTyre[dn]._sn||0)){
        var age=(n-st.lap_start)+(st.tyre_age_at_start||0);
        if(age<0) age=0;
        var info={compound:st.compound,age:age,_sn:st.stint_number};
        S.currentTyre[dn]=info;
        S.currentTyre[String(dn)]=info;
      }
    }
  });

  // ── 6. Race Control + Weather ─────────────────────────────────────
  var rcCutoff = RP.lapStartDate[n+1] || RP.lapCutoff[n] || RP.lapCutoff[n-1] || RP.lapStartDate[n] || null;
  var cutoffMs = rcCutoff ? Date.parse(rcCutoff) : null;
  var rcFiltered = [];
  for(var ri=0; ri<RP.rc.length; ri++){
    var rcm = RP.rc[ri];
    var msgLap = (rcm.lap_number !== null && rcm.lap_number !== undefined && rcm.lap_number !== '')
                 ? parseInt(rcm.lap_number, 10) : null;
    if(msgLap !== null && !isNaN(msgLap)){
      if(msgLap <= n) rcFiltered.push(rcm);
    } else if(cutoffMs){
      var msgMs = rcm.date ? Date.parse(rcm.date) : null;
      if(msgMs && msgMs <= cutoffMs) rcFiltered.push(rcm);
    } else {
      rcFiltered.push(rcm);
    }
  }
  S.raceControl = rcFiltered.slice().reverse();

  var wxBest = null;
  if(cutoffMs){
    for(var wi=0; wi<RP.wx.length; wi++){
      var wxMs = RP.wx[wi].date ? Date.parse(RP.wx[wi].date) : null;
      if(wxMs && wxMs <= cutoffMs) wxBest = RP.wx[wi];
    }
  }
  S.weather = wxBest || (RP.wx.length ? RP.wx[0] : null);

  updateDOM();
}
function rpNext(){
  if(RP.showGrid){RP.showGrid=false;renderReplayLap(1);return;}
  if(RP.cur<RP.max)renderReplayLap(RP.cur+1);else stopPP();
}
function rpPrev(){
  if(RP.showGrid){ return; }
  if(RP.cur>1) renderReplayLap(RP.cur-1);
}
function togglePP(){if(RP.playing)stopPP();else startPP();}
function startPP(){
  if(RP.showGrid){
    RP.showGrid=false;
    renderReplayLap(1);
  } else if(RP.cur>=RP.max){
    renderReplayLap(1);
  }
  RP.playing=true;
  document.getElementById('btn-pp').textContent='\u23F8';
  document.getElementById('btn-pp').className='rbtn active';
  schedNext();
}
function stopPP(){
  RP.playing=false;
  if(RP.timer){clearTimeout(RP.timer);RP.timer=null;}
  document.getElementById('btn-pp').textContent='\u25B6';
  document.getElementById('btn-pp').className='rbtn';
}
function schedNext(){
  if(!RP.playing)return;
  RP.timer=setTimeout(function(){
    if(!RP.playing)return;
    if(RP.cur<RP.max){renderReplayLap(RP.cur+1);schedNext();}
    else stopPP();
  },Math.round(2200/RP.speed));
}
function onSlider(v){
  stopPP();
  if(RP.showGrid) RP.showGrid=false;
  renderReplayLap(parseInt(v,10));
}
function setSpeed(v){RP.speed=parseFloat(v)||1;}

/* ══ SESSION BROWSER ════════════════════════════════════════ */
function toggleBrowser(){
  var p=document.getElementById('browser');
  if(p.className.indexOf('open')!==-1){closeBrowser();}
  else{
    p.className='browser open';
    if(IS_LV) stopLive();
    onYearChange();
  }
}
function closeBrowser(){
  document.getElementById('browser').className='browser';
  if(IS_LV) startLive();
}
function brLoad(on){document.getElementById('br-loading').style.display=on?'inline':'none';}

function onYearChange(){
  var yr=document.getElementById('sel-year').value;
  var sm=document.getElementById('sel-meeting');
  var ss=document.getElementById('sel-session');
  sm.disabled=true;ss.disabled=true;
  sm.innerHTML='<option value="">Loading&hellip;</option>';
  ss.innerHTML='<option value="">&#8212; Select Grand Prix first &#8212;</option>';
  document.getElementById('btn-load').disabled=true;
  brLoad(true);
  apiFetchRaw('/meetings',{year:yr}).then(function(data){
    BR.meetings=(Array.isArray(data)?data:[]).filter(function(m){return !m.is_cancelled;});
    BR.meetings.sort(function(a,b){return (a.date_start||'').localeCompare(b.date_start||'');});
    var html='<option value="">&#8212; Select Grand Prix &#8212;</option>';
    BR.meetings.forEach(function(m){
      html+='<option value="'+m.meeting_key+'">'+(m.meeting_name||m.meeting_official_name||'Grand Prix')+'</option>';
    });
    sm.innerHTML=html;sm.disabled=false;brLoad(false);
  }).catch(function(){sm.innerHTML='<option value="">Error loading</option>';brLoad(false);});
}

function onSessionChange(){
  var sk=document.getElementById('sel-session').value;
  document.getElementById('btn-load').disabled=!sk;
}

function onMeetingChange(){
  var mk=document.getElementById('sel-meeting').value;
  var ss=document.getElementById('sel-session');
  if(!mk){ss.innerHTML='<option value="">&#8212; Select Grand Prix first &#8212;</option>';ss.disabled=true;document.getElementById('btn-load').disabled=true;return;}
  ss.disabled=true;ss.innerHTML='<option value="">Loading&hellip;</option>';
  document.getElementById('btn-load').disabled=true;brLoad(true);
  apiFetchRaw('/sessions',{meeting_key:mk}).then(function(data){
    BR.sessions=Array.isArray(data)?data:[];
    BR.sessions.sort(function(a,b){return (a.date_start||'').localeCompare(b.date_start||'');});
    var html='<option value="">&#8212; Select Session &#8212;</option>';
    BR.sessions.forEach(function(s){
      var lbl=(s.session_name||s.session_type||'Session')+(s.date_start?' ('+s.date_start.substring(0,10)+')':'');
      html+='<option value="'+s.session_key+'">'+lbl+'</option>';
    });
    ss.innerHTML=html;ss.disabled=false;brLoad(false);
  }).catch(function(){ss.innerHTML='<option value="">Error loading</option>';brLoad(false);});
}

function loadSelected(){
  var sk=parseInt(document.getElementById('sel-session').value,10);
  if(!sk)return;
  var si=null;
  BR.sessions.forEach(function(s){if(parseInt(s.session_key,10)===sk)si=s;});
  if(si){
    document.getElementById('hdr-name').textContent=(si.circuit_short_name||'?')+' \u2014 '+(si.session_name||'?');
    var mt=(si.country_name||'?');
    if(si.date_start) mt+=' \u00B7 '+si.date_start.substring(0,10);
    mt+=' \u00B7 OpenF1 API (Historical)';
    document.getElementById('hdr-meta').textContent=mt;
  }
  loadSessionForReplay(sk, si, BR.sessions);
}

function goLive(){
  stopPP();
  RP.active=false;RP.gridOrder={};RP.gridPositions=[];RP.showGrid=false;RP.year=0;
  IS_LV=true;CURSK=LIVESK;
  // Re-evaluate live window at runtime (not just PHP boot-time flag)
  IS_NO_SESSION = checkNoSession();
  S._mpos={}; S._mpits={}; S._mstints={}; S._mrc={};
  _towerRows={}; _cellCache={}; _towerReady=false; _rcLastCount=-1; S._restPos={}; S._mpos={}; S.startGrid=null;
  cancelNoSession();
  document.getElementById('rows').innerHTML='';
  document.getElementById('replay-bar').className='replay-bar';
  document.getElementById('lap-ctr').innerHTML='&mdash;';
  document.getElementById('skey').textContent = IS_NO_SESSION ? '\u2014' : LIVESK;
  if(!IS_NO_SESSION){
    document.getElementById('hdr-name').textContent='<?php echo $js_circuit; ?> \u2014 <?php echo $js_session; ?>';
    document.getElementById('hdr-meta').textContent='<?php echo $js_country; ?><?php if ($date_start): ?> \u00B7 <?php echo date('d M Y', strtotime($date_start)); ?><?php endif; ?> \u00B7 OpenF1 API';
    document.getElementById('live-badge').className='live-badge';
    document.getElementById('lbt').textContent='LIVE';
    var liveBadge=document.getElementById('hdr-badge');
    if(liveBadge){
      liveBadge.textContent='<?php echo strtoupper($session_type ? $session_type : "SESSION"); ?>';
      liveBadge.className='<?php echo "h-badge" . ($badge_class ? " " . $badge_class : ""); ?>';
    }
    scheduleNoSession();
  }
  closeBrowser();
  var _prevDRV2 = DRV;
  DRV = {};
  fetchJSON(PROXY_URL+encodeURIComponent('/drivers')+'&session_key='+LIVESK)
    .then(function(arr){
      if(arr&&arr.length){
        var valid=arr.filter(function(d){return d&&d.driver_number;});
        if(valid.length){ valid.forEach(function(d){DRV[d.driver_number]=d;DRV[String(d.driver_number)]=d;}); return; }
      }
      DRV = _prevDRV2;
    }).catch(function(){ DRV = _prevDRV2; });
  startLive();
}

/* ══ DOM UPDATES ════════════════════════════════════════════ */
function updateDOM(){
  updateTower();
  updateWeather();
  updateRC();
  updateFL();
  updateDNF();
}

/* ── Timing Tower: per-row update + DOM reordering (no full rebuild) ──────────
   Each driver row has a stable ID (trow-{dn}). On each update:
   1. Missing rows are created and appended.
   2. Each existing row's innerHTML is updated in-place.
   3. Rows are reordered via appendChild (DOM move — no recreation, no flicker).
   4. Rows of drivers no longer in positions are removed.
   ─────────────────────────────────────────────────────────────────────────── */
var _noSessionTimer = null;
var _noSessionActive = false;

var NO_SESSION_MSG_TOWER = 'NO POSITION DATA AVAILABLE \u2014 WAITING FOR NEXT LIVE SESSION';
var NO_SESSION_MSG_PANEL = 'NO ACTIVE SESSION';
var NO_SESSION_HDR       = 'NO ACTIVE LIVE SESSION AT THE MOMENT';

function showNoSession(){
  _noSessionActive = true;
  // Header
  var hdrName = document.getElementById('hdr-name');
  if(hdrName) hdrName.textContent = NO_SESSION_HDR;
  var hdrMeta = document.getElementById('hdr-meta');
  if(hdrMeta) hdrMeta.textContent = '';
  var hdrBadge = document.getElementById('hdr-badge');
  if(hdrBadge){ hdrBadge.textContent = 'WAITING'; hdrBadge.className = 'h-badge practice'; }
  var liveBadgeEl = document.getElementById('live-badge');
  if(liveBadgeEl) liveBadgeEl.className = 'live-badge replay';
  var lbtEl = document.getElementById('lbt');
  if(lbtEl) lbtEl.textContent = 'OFFLINE';
  // Footer: clear stale session key
  var skeyEl = document.getElementById('skey');
  if(skeyEl) skeyEl.textContent = '\u2014';
  setStatus(false, 'No active live session \u2014 waiting for next session');
  // Timing Tower / panels
  var rowsEl = document.getElementById('rows');
  if(rowsEl){
    rowsEl.innerHTML = '<div class="nodata" style="padding:40px 24px;font-size:13px;letter-spacing:1px;">'+NO_SESSION_MSG_TOWER+'</div>';
    _towerRows = {}; _cellCache = {}; _towerReady = false;
  }
  var flEl  = document.getElementById('fl-list');
  var dnfEl = document.getElementById('dnf-list');
  var rcEl  = document.getElementById('rc-list');
  if(flEl)  flEl.innerHTML  = '<div class="nodata">'+NO_SESSION_MSG_PANEL+'</div>';
  if(dnfEl) dnfEl.innerHTML = '<div class="nodata">'+NO_SESSION_MSG_PANEL+'</div>';
  if(rcEl)  rcEl.innerHTML  = '<div class="nodata">'+NO_SESSION_MSG_PANEL+'</div>';
  var flCnt  = document.getElementById('fl-cnt');
  var dnfCnt = document.getElementById('dnf-cnt');
  var rcCnt  = document.getElementById('rc-cnt');
  if(flCnt)  flCnt.innerHTML  = '&mdash;';
  if(dnfCnt) dnfCnt.innerHTML = '&mdash;';
  if(rcCnt)  rcCnt.innerHTML  = '&mdash;';
  // Poll for next live session every 3 minutes — reload when one starts
  _startNextSessionPoller();
}

var _nextSessionPoll = null;

function _startNextSessionPoller(){
  _stopNextSessionPoller();
  // Check every 3 minutes if a new session has started
  _nextSessionPoll = setInterval(function(){
    fetchJSON(PROXY_URL+encodeURIComponent('/sessions')+'&session_key=latest')
      .then(function(arr){
        if(!Array.isArray(arr)||!arr.length) return;
        var latest = arr[arr.length-1];
        var newSK  = parseInt(latest.session_key, 10);
        var endMs  = latest.date_end ? (new Date(latest.date_end).getTime() + 3600000) : 0;
        var isLive = (endMs === 0) || (Date.now() < endMs);
        if(newSK && newSK !== LIVESK && isLive){
          // New live session detected — reload to get fresh PHP bootstrap
          window.location.reload();
        } else if(newSK === LIVESK && isLive){
          // Same session just became live (e.g. within 30min window) — reload
          window.location.reload();
        }
      }).catch(function(){});
  }, 3 * 60 * 1000); // every 3 minutes
}

function _stopNextSessionPoller(){
  if(_nextSessionPoll){ clearInterval(_nextSessionPoll); _nextSessionPoll=null; }
}

function cancelNoSession(){
  _noSessionActive = false;
  _stopNextSessionPoller();
  if(_noSessionTimer){ clearTimeout(_noSessionTimer); _noSessionTimer = null; }
}

function scheduleNoSession(){
  if(_noSessionTimer) clearTimeout(_noSessionTimer);
  // Show "no session" if no position data arrives within 20 seconds
  _noSessionTimer = setTimeout(function(){
    if(IS_LV && !RP.active && !S.positions.length) showNoSession();
  }, 20000);
}

var _towerRows  = {};
var _cellCache  = {}; // dn -> per-cell last-rendered value cache
var _towerReady = false;

// ── Micro helpers (read before write to avoid triggering layout) ─────────────
function _ct(id){ return document.getElementById(id); }
function _setTxt(id,v){
  var e=_ct(id); if(!e) return;
  var s=v===null||v===undefined?'\u2014':String(v);
  if(e.textContent!==s) e.textContent=s;
}
function _setHtml(id,v){ var e=_ct(id); if(e&&e.innerHTML!==v) e.innerHTML=v; }
function _setCls(id,c){ var e=_ct(id); if(e&&e.className!==c) e.className=c; }

// ── Row skeleton — created ONCE per driver ───────────────────────────────────
function _createRowEl(dn){
  var d=getDriverInfo(dn)||{};
  var col=tc(d);
  var teamName=d.team_name||'';
  var txtCol=teamTxtColor(teamName,col);
  var abbr=teamAbbr(teamName);
  var acr=d.name_acronym||(d.full_name?d.full_name.split(' ').pop().substring(0,3).toUpperCase():'???');
  var fullName=d.full_name||acr;
  var parts=fullName.trim().split(' ');
  var last=parts.pop(); var first=parts.join(' ');
  var nameHtml=first
    ?'<span style="text-transform:uppercase;font-weight:700;color:'+col+'">'+last+'</span> <span style="font-weight:400;color:'+col+'">'+first+'</span>'
    :'<span style="text-transform:uppercase;font-weight:700;color:'+col+'">'+last+'</span>';
  var row=document.createElement('div');
  row.id='trow-'+dn; row.className='dr trow';
  row.style.setProperty('--tc',col);
  row.innerHTML=
    '<div class="cpos" id="tcpos-'+dn+'">&#8212;</div>'+
    '<div class="cteam"><span class="tlogo" style="background:'+col+';color:'+txtCol+'">'+abbr+'</span></div>'+
    '<div class="cdrv"><span class="dnum">'+dn+'</span><span class="dacr">'+acr+'</span></div>'+
    '<div class="cname"><span class="dname">'+nameHtml+'</span><span class="dteam">'+(teamName||'&#8212;')+'</span></div>'+
    '<div class="ctyre ns" id="tctyre-'+dn+'"></div>'+
    '<div id="tcsect-'+dn+'"><div class="csectors"></div></div>'+
    '<div class="ct" id="tclt-'+dn+'">&#8212;</div>'+
    '<div class="ct" id="tcbt-'+dn+'">&#8212;</div>'+
    '<div class="cgap" id="tcgap-'+dn+'">&#8212;</div>'+
    '<div class="cint" id="tcivl-'+dn+'">&#8212;</div>'+
    '<div class="cgained gsame" id="tcgnd-'+dn+'">&#8212;</div>'+
    '<div class="clap" id="tclap-'+dn+'">&#8212;</div>'+
    '<div class="cpit ns" id="tcpit-'+dn+'">&#8212;</div>';
  return row;
}

// ── Update only cells whose value changed ────────────────────────────────────
function _updateRowCells(dn, pos){
  var d=getDriverInfo(dn)||{};
  var comp=S.completedLaps[dn]||null;
  var lap=S.laps[dn];
  var iv=S.intervals[dn]||S.intervals[String(dn)];
  var pits=S.pits[dn]||S.pits[String(dn)]||0;
  var posN=pos.position;
  if(!_cellCache[dn]) _cellCache[dn]={};
  var cc=_cellCache[dn];

  // Position
  var pCls='cpos'+(posN===1?' p1':posN===2?' p2':posN===3?' p3':'');
  if(cc.pos!==posN||cc.pcls!==pCls){ _setCls('tcpos-'+dn,pCls); _setTxt('tcpos-'+dn,posN); cc.pos=posN; cc.pcls=pCls; }

  // Tyre — use renderTyre() and copy its output's class+innerHTML onto the cell element
  var tyreEl=_ct('tctyre-'+dn);
  if(tyreEl){
    var tyreHtml=renderTyre(dn);
    if(cc.tyre!==tyreHtml){
      // Parse renderTyre output (<div class="ctyre ...">...</div>) → copy to our element
      var tmp=document.createElement('div');
      tmp.innerHTML=tyreHtml;
      var src=tmp.firstChild;
      if(src){
        if(tyreEl.className!==src.className) tyreEl.className=src.className;
        if(tyreEl.innerHTML!==src.innerHTML) tyreEl.innerHTML=src.innerHTML;
      }
      cc.tyre=tyreHtml;
    }
  }

  // Sectors
  var sectHtml=renderSectors(comp||lap,dn);
  if(cc.sect!==sectHtml){ _setHtml('tcsect-'+dn,sectHtml); cc.sect=sectHtml; }

  // Last lap
  var lastT=comp?comp.lap_duration:null;
  var ltC='ct'+ltCls(dn,lastT);
  var ltStr=fmtL(lastT);
  if(cc.lt!==ltStr||cc.ltcls!==ltC){ _setCls('tclt-'+dn,ltC); _setTxt('tclt-'+dn,ltStr||'\u2014'); cc.lt=ltStr; cc.ltcls=ltC; }

  // Best lap
  var bestT=S.bestLaps[dn]?S.bestLaps[dn].t:null;
  var btStr=fmtL(bestT);
  if(cc.bt!==btStr){ _setTxt('tcbt-'+dn,btStr||'\u2014'); cc.bt=btStr; }

  // Gap
  var gH,gCls;
  if(posN===1){gH='LEADER';gCls='cgap lead';}
  else if(iv&&iv.gap_to_leader!=null){gH=fmtG(iv.gap_to_leader);gCls='cgap';}
  else{gH='\u2014';gCls='cgap';}
  if(cc.gap!==gH||cc.gapcls!==gCls){ _setCls('tcgap-'+dn,gCls); _setTxt('tcgap-'+dn,gH); cc.gap=gH; cc.gapcls=gCls; }

  // Interval
  var iH,iCls;
  if(posN===1){iH='\u2014';iCls='cint lead';}
  else if(iv&&iv.interval!=null){iH=fmtG(iv.interval);iCls='cint';}
  else{iH='\u2014';iCls='cint';}
  if(cc.ivl!==iH||cc.ivlcls!==iCls){ _setCls('tcivl-'+dn,iCls); _setTxt('tcivl-'+dn,iH); cc.ivl=iH; cc.ivlcls=iCls; }

  // Gained/lost vs starting grid — replay uses RP.gridOrder, live uses S.startGrid
  var gndH,gndCls;
  if(RP.active && RP.gridPositions.length>0){
    var gridPos=RP.gridOrder[dn]||RP.gridOrder[String(dn)];
    if(gridPos&&posN){
      var diff=gridPos-posN;
      gndH=diff>0?'+'+diff:diff<0?String(diff):'\u2014';
      gndCls='cgained '+(diff>0?'gup':diff<0?'gdown':'gsame');
    } else { gndH='\u2014'; gndCls='cgained gsame'; }
  } else if(!RP.active && S.startGrid){
    var sgPos=S.startGrid[String(dn)]||S.startGrid[dn];
    if(sgPos&&posN){
      var diff2=sgPos-posN;
      gndH=diff2>0?'+'+diff2:diff2<0?String(diff2):'\u2014';
      gndCls='cgained '+(diff2>0?'gup':diff2<0?'gdown':'gsame');
    } else { gndH='\u2014'; gndCls='cgained gsame'; }
  } else { gndH='\u2014'; gndCls='cgained gsame'; }
  if(cc.gnd!==gndH||cc.gndcls!==gndCls){ _setCls('tcgnd-'+dn,gndCls); _setTxt('tcgnd-'+dn,gndH); cc.gnd=gndH; cc.gndcls=gndCls; }

  // Lap number
  var lapN=lap?String(lap.lap_number):'\u2014';
  if(cc.lap!==lapN){ _setTxt('tclap-'+dn,lapN); cc.lap=lapN; }

  // Pit count
  var pitH=pits>0?String(pits):'\u2014';
  var pitCls='cpit'+(pits===0?' ns':'');
  if(cc.pit!==pitH||cc.pitcls!==pitCls){ _setCls('tcpit-'+dn,pitCls); _setTxt('tcpit-'+dn,pitH); cc.pit=pitH; cc.pitcls=pitCls; }
}

function updateTower(){
  var el=document.getElementById('rows');
  if(!S.positions.length){
    if(!_towerReady) return;
    el.innerHTML='<div class="nodata">NO POSITION DATA &mdash; WAITING FOR SESSION</div>';
    _towerRows={}; _cellCache={}; _towerReady=false;
    return;
  }
  _towerReady=true;
  cancelNoSession(); // real data arrived — clear any "no session" state
  if(S.maxLap){
    var total=S.totalLaps||(RP.active?RP.max:0);
    document.getElementById('lap-ctr').textContent='LAP '+S.maxLap+(total>0?' / '+total:'');
  }
  // 1. Create missing rows (once per driver, static skeleton)
  S.positions.forEach(function(pos){
    var dn=pos.driver_number;
    if(!_towerRows[dn]){ el.appendChild(_createRowEl(dn)); _towerRows[dn]=true; }
  });
  // 2. Update only changed cells (no row rebuild, transitions handle colour fades)
  S.positions.forEach(function(pos){ _updateRowCells(pos.driver_number,pos); });
  // 3. Reorder via DOM moves only when order has actually changed
  var desiredOrder = S.positions.map(function(p){ return 'trow-'+p.driver_number; });
  var currentOrder = [];
  var ch = el.children;
  for(var ci=0; ci<ch.length; ci++) currentOrder.push(ch[ci].id);
  if(currentOrder.join(',') !== desiredOrder.join(',')){
    S.positions.forEach(function(pos){
      var row=document.getElementById('trow-'+pos.driver_number);
      if(row) el.appendChild(row);
    });
  }
  // 4. Remove stale rows
  Object.keys(_towerRows).forEach(function(dn){
    if(!S.positions.some(function(p){return p.driver_number==dn;})){
      var row=document.getElementById('trow-'+dn);
      if(row&&row.parentNode) row.parentNode.removeChild(row);
      delete _towerRows[dn]; delete _cellCache[dn];
    }
  });
}

function updateWeather(){
  var w=S.weather;if(!w)return;
  var n=function(v){return v!=null?v:'&#8212;';};
  var trk=document.getElementById('wx-trk');if(!trk)return;
  trk.innerHTML=n(w.track_temperature)+'<span class="wx-unit">&deg;C</span>';
  document.getElementById('wx-air').innerHTML=n(w.air_temperature)+'<span class="wx-unit">&deg;C</span>';
  document.getElementById('wx-wnd').innerHTML=n(w.wind_speed)+'<span class="wx-unit">km/h</span>';
  document.getElementById('wx-rain').textContent=w.rainfall?'\uD83C\uDF27 YES':'\u2600 NO';
  document.getElementById('wx-hum').innerHTML=n(w.humidity)+'<span class="wx-unit">%</span>';
  document.getElementById('wx-prs').innerHTML=n(w.pressure)+'<span class="wx-unit">mbar</span>';
  document.getElementById('wx-ts').textContent=fmtT(w.date);
}

var _rcLastCount = -1; // cache: only rebuild RC list when count changes

function updateRC(){
  var el=document.getElementById('rc-list');
  var cntEl=document.getElementById('rc-cnt');
  if(!S.raceControl.length){
    if(_rcLastCount!==0){ el.innerHTML='<div class="nodata">NO MESSAGES</div>'; cntEl.innerHTML='&mdash;'; _rcLastCount=0; }
    return;
  }
  // Skip full rebuild if count hasn't changed (messages are immutable once added)
  if(S.raceControl.length===_rcLastCount) return;
  _rcLastCount=S.raceControl.length;
  cntEl.textContent=S.raceControl.length+' Messages';
  var html='';
  S.raceControl.forEach(function(m){
    var flag=(m.flag||'').toUpperCase().trim();
    var cat=(m.category||'').toUpperCase().trim();
    var msg=(m.message||m.Message||m.text||'').trim();
    var cls='',badge='';
    var msgU=msg.toUpperCase();

    if(flag==='RED'||flag==='RED FLAG'||cat==='REDFLAG'){
      cls='mr'; badge='<span class="fchip r">RED</span>';
    } else if(flag.indexOf('YELLOW')!==-1){
      cls='my'; badge='<span class="fchip y">YEL</span>';
    } else if(flag==='GREEN'||flag==='CLEAR'){
      cls='mg'; badge='<span class="fchip g">GRN</span>';
    } else if(flag==='CHEQUERED'||flag==='CHEQUERED FLAG'){
      cls='mc'; badge='<span class="fchip c">&#127937;</span>';
    } else if(msgU.indexOf('VIRTUAL SAFETY CAR')!==-1||flag.indexOf('VIRTUAL')!==-1||cat.indexOf('VIRTUAL')!==-1){
      cls='mv'; badge='<span class="fchip s">VSC</span>';
    } else if(cat==='SAFETYCAR'||cat==='SAFETY CAR'||flag.indexOf('SAFETY')!==-1||msgU.indexOf('SAFETY CAR')!==-1){
      if(msgU.indexOf('IN THIS LAP')!==-1||msgU.indexOf('ENDING')!==-1){
        cls='ms'; badge='<span class="fchip s">SCI</span>';
      } else {
        cls='ms'; badge='<span class="fchip s">SC</span>';
      }
    } else if(cat==='DRS'||msgU.indexOf('DRS ')!==-1){
      cls='md'; badge='<span class="fchip d">DRS</span>';
    }

    if(!msg) msg=flag||cat||'\u2014';
    html+='<div class="rcm '+cls+'"><div class="rct">'+fmtT(m.date)+'</div><div class="rcm-txt">'+badge+msg+'</div></div>';
  });
  el.innerHTML=html;
}
function updateFL(){
  var el=document.getElementById('fl-list');
  var ks=Object.keys(S.bestLaps);
  if(!ks.length){el.innerHTML='<div class="nodata">NO LAP TIMES YET</div>';return;}
  var sorted=ks.map(function(dn){
    var b=S.bestLaps[dn];
    return{dn:parseInt(dn,10),t:b.t,n:b.n};
  }).sort(function(a,b){return a.t-b.t;}).slice(0,10);
  var ob=sorted[0].t;
  var html='';
  sorted.forEach(function(item,i){
    var d=getDriverInfo(item.dn)||{};
    var col=tc(d);
    var isBest=Math.abs(item.t-ob)<0.001;
    html+='<div class="fl-row">'+
      '<div class="fl-pos">'+(i+1)+'</div>'+
      '<div class="fl-num" style="color:'+col+'">'+item.dn+'</div>'+
      '<div class="fl-name" style="color:'+col+'">'+(d.name_acronym||'#'+item.dn)+'</div>'+
      '<div class="fl-time '+(isBest?'pb':'nm')+'">'+fmtL(item.t)+'</div>'+
      '<div class="fl-lap">L'+item.n+'</div>'+
    '</div>';
  });
  el.innerHTML=html;
}

function updateDNF(){
  var panel=document.getElementById('dnf-panel');
  var el=document.getElementById('dnf-list');
  var cntEl=document.getElementById('dnf-cnt');

  // Only meaningful for race-type sessions
  var stype=(typeof SESSION_TYPE!=='undefined'?SESSION_TYPE:'').toLowerCase();
  var isRace=stype.indexOf('race')!==-1||stype.indexOf('sprint')!==-1||RP.active;

  if(!isRace||!S.maxLap||S.maxLap<6){
    cntEl.innerHTML='&mdash;';
    el.innerHTML='<div class="nodata">No retirements</div>';
    return;
  }

  var curLap=S.maxLap;

  // Build per-driver max-lap ONLY from REST batch data (allLapsFlat)
  // Deliberately avoid S.laps (MQTT) — MQTT data can be temporarily delayed,
  // causing active drivers to appear as DNF. REST is complete and stable.
  var driverMaxLap={};
  var lapSource=(RP.active&&RP.laps&&RP.laps.length)?RP.laps:(S.allLapsFlat||[]);
  lapSource.forEach(function(l){
    var dn=String(l.driver_number);
    if((l.lap_number||0)>(driverMaxLap[dn]||0)) driverMaxLap[dn]=l.lap_number;
  });

  // All starters = drivers with at least one lap recorded
  var starters={};
  Object.keys(driverMaxLap).forEach(function(dn){ if(driverMaxLap[dn]>0) starters[dn]=1; });

  var dnfs=[];
  Object.keys(starters).forEach(function(dnStr){
    var lastLap=driverMaxLap[dnStr]||0;
    if(lastLap>0&&(curLap-lastLap)>=5) dnfs.push({dn:parseInt(dnStr,10),lap:lastLap});
  });

  if(!dnfs.length){
    cntEl.textContent='0';
    el.innerHTML='<div class="nodata">No retirements yet</div>';
    return;
  }

  dnfs.sort(function(a,b){return a.lap-b.lap;});
  cntEl.textContent=dnfs.length;
  var html='';
  dnfs.forEach(function(item){
    var d=getDriverInfo(item.dn)||{};
    var col=tc(d);
    var acr=d.name_acronym||'#'+item.dn;
    var team=d.team_name||'&mdash;';
    html+='<div class="dnf-row">'+
      '<div class="dnf-num" style="color:'+col+'">'+item.dn+'</div>'+
      '<div class="dnf-acr" style="color:'+col+'">'+acr+'</div>'+
      '<div class="dnf-team">'+team+'</div>'+
      '<div class="dnf-lap">L'+item.lap+'</div>'+
    '</div>';
  });
  el.innerHTML=html;
}

/* ══ UI UTILITIES ═══════════════════════════════════════════ */
function setSpinning(on){document.getElementById('spin').className='spin-ring'+(on?' on':'');}
function setStatus(ok,msg){
  document.getElementById('sdot').className='sdot'+(ok?'':' off');
  document.getElementById('sstat').textContent=ok?(msg||'OpenF1 API connected \u00B7 real-time'):'API Error: '+(msg||'?');
}

/* ══ CLOCK ══════════════════════════════════════════════════ */
function updateClock(){
  var d=new Date();
  document.getElementById('clock').textContent=
    ('0'+d.getHours()).slice(-2)+':'+('0'+d.getMinutes()).slice(-2)+':'+('0'+d.getSeconds()).slice(-2);
}
setInterval(updateClock,1000);updateClock();

/* ══ NEXT SESSION COUNTDOWN ════════════════════════════════ */
// Runs fully independently — does NOT use fetchJSON/apiFetch to avoid 429 interference.
// Fired with a 4s delay after page load so it doesn't compete with driver/session fetches.
(function initCountdown(){
  var cdTimer=null;
  function fmtCd(ms){
    if(ms<=0) return 'LIVE';
    var d=Math.floor(ms/86400000);
    var h=Math.floor((ms%86400000)/3600000);
    var m=Math.floor((ms%3600000)/60000);
    var s=Math.floor((ms%60000)/1000);
    if(d>0) return d+'d '+('0'+h).slice(-2)+':'+('0'+m).slice(-2)+':'+('0'+s).slice(-2);
    return ('0'+h).slice(-2)+':'+('0'+m).slice(-2)+':'+('0'+s).slice(-2);
  }
  function startCd(target, sessionLabel){
    var el=document.getElementById('h-cd-time');
    var lb=document.getElementById('h-cd-label');
    var wrap=document.getElementById('h-countdown');
    if(!el||!lb||!wrap) return;
    lb.textContent=sessionLabel||'';
    wrap.style.display='flex';
    if(cdTimer) clearInterval(cdTimer);
    cdTimer=setInterval(function(){
      var rem=target-Date.now();
      el.textContent=fmtCd(rem);
      if(rem<=0){
        clearInterval(cdTimer); cdTimer=null;
        // Session started — reload after 60s to show NEXT upcoming session
        setTimeout(load, 60000);
      }
    },1000);
    el.textContent=fmtCd(target-Date.now());
  }
  function findNext(sessions, meetingMap){
    var now=Date.now();
    // Sort ascending by date_start, find the first future non-cancelled session
    var future=[];
    for(var i=0;i<sessions.length;i++){
      var s=sessions[i];
      var d=s.date_start?new Date(s.date_start).getTime():null;
      if(!d||d<=now) continue;
      // Look up meeting to check is_cancelled and get circuit_short_name
      var mtg=meetingMap[s.meeting_key]||null;
      if(mtg&&mtg.is_cancelled===true) continue; // skip cancelled meetings
      future.push({t:d, s:s, mtg:mtg});
    }
    if(!future.length) return null;
    future.sort(function(a,b){return a.t-b.t;});
    return future[0];
  }
  function load(){
    var year=new Date().getFullYear();
    function tryFetch(useProxy){
      var mUrl = useProxy
        ? fetchJSON(PROXY_URL+encodeURIComponent('/meetings')+'&year='+year).catch(function(){return[];})
        : fetch('https://api.openf1.org/v1/meetings?year='+year).then(function(r){return r.ok?r.json():[];}).catch(function(){return[];});
      var sUrl = useProxy
        ? fetchJSON(PROXY_URL+encodeURIComponent('/sessions')+'&year='+year).catch(function(){return[];})
        : fetch('https://api.openf1.org/v1/sessions?year='+year).then(function(r){return r.ok?r.json():[];}).catch(function(){return[];});
      return Promise.all([mUrl, sUrl]);
    }
    // Try proxy first (avoids CORS), then fall back to direct API
    tryFetch(true).then(function(results){
      var meetings=Array.isArray(results[0])?results[0]:[];
      var sessions=Array.isArray(results[1])?results[1]:[];
      if(!sessions.length) return tryFetch(false); // retry with direct API
      return results;
    }).then(function(results){
      if(!results) return;
      var meetings=Array.isArray(results[0])?results[0]:[];
      var sessions=Array.isArray(results[1])?results[1]:[];
      if(!sessions.length){ setTimeout(load, 15000); return; } // retry in 15s
      var meetingMap={};
      for(var i=0;i<meetings.length;i++){ var m=meetings[i]; meetingMap[m.meeting_key]=m; }
      var next=findNext(sessions, meetingMap);
      if(!next){ setTimeout(load, 1800000); return; } // no upcoming — retry in 30min
      var s=next.s; var mtg=next.mtg;
      var parts=[];
      if(mtg&&mtg.circuit_short_name) parts.push(mtg.circuit_short_name);
      else if(s.circuit_short_name)   parts.push(s.circuit_short_name);
      if(s.session_name) parts.push(s.session_name);
      startCd(next.t, parts.join(' \u00B7 ')||'Next Session');
    }).catch(function(){ setTimeout(load, 15000); }); // retry in 15s on error
  }
  // Delay 4s so it doesn't compete with the main session/driver fetch on page load
  setTimeout(load, 4000);
  // Refresh every 30 minutes to keep session info current
  setInterval(load, 1800000);
})();

/* ══ LIVE LOOP ══════════════════════════════════════════════ */
var _liveTimer=null,_cdTimer=null,_cd=Math.round(RF_MS/1000);

// REST polling (used when MQTT unavailable or not configured)
function startLiveREST(){
  if(_cdTimer) return; // already running
  if(!IS_LV) return;
  fetchAll();
  _cd=Math.round(RF_MS/1000);
  _cdTimer=setInterval(function(){
    _cd--;
    if(_cd<=0){_cd=Math.round(RF_MS/1000);if(IS_LV && !MQTT_ACTIVE)fetchAll();}
  },1000);
}

function startLive(){
  stopLive();
  if(!IS_LV) return;
  // Clear any stale rows and caches from previous state
  _towerRows={}; _cellCache={}; _towerReady=false; _rcLastCount=-1; S._restPos={}; S._mpos={}; S.startGrid=null;
  // Re-evaluate live window at runtime
  IS_NO_SESSION = checkNoSession();
  // If no active live session, show message and stop
  if(IS_NO_SESSION){ showNoSession(); return; }
  cancelNoSession();
  // Try WebSocket first (requires sponsor account + token)
  if(MQTT_TOKEN){
    startMQTT(); // startMQTT calls fetchAll() itself on 'connect'
  } else {
    startLiveREST();
  }
  // Fetch qualifying positions for GAINED (async, doesn't block live data)
  setTimeout(loadLiveStartingGrid, 3000);
}

function stopLive(){
  stopMQTT();
  if(_cdTimer){clearInterval(_cdTimer);_cdTimer=null;}
  _liveTimer=null;
}

/* ══ INIT ═══════════════════════════════════════════════════ */
(function init(){
  function resolveSessionKey(){
    if(LIVESK && LIVESK!==0) return Promise.resolve(LIVESK);
    return fetchJSON(PROXY_URL+encodeURIComponent('/sessions')+'&session_key=latest')
      .then(function(arr){
        if(arr&&arr.length){
          var sk=arr[arr.length-1].session_key;
          LIVESK=sk;CURSK=sk;
          document.getElementById('skey').textContent=sk;
          return sk;
        }
        return 0;
      }).catch(function(){return 0;});
  }

  function loadDrivers(sk){
    if(!sk) return Promise.resolve();
    var url = PROXY_URL+encodeURIComponent('/drivers')+'&session_key='+encodeURIComponent(sk);
    function tryLoad(){
      return fetchJSON(url).then(function(arr){
        if(!arr || !arr.length) return false;
        // Validate: real driver data has driver_number
        var valid = arr.filter(function(d){ return d && d.driver_number; });
        if(!valid.length) return false;
        valid.forEach(function(d){ DRV[d.driver_number]=d; DRV[String(d.driver_number)]=d; });
        return true;
      }).catch(function(){ return false; });
    }
    // Retry up to 3 times with growing delay (handles 429 during live window)
    function attempt(n){
      return tryLoad().then(function(ok){
        if(ok) return;
        if(n < 3){
          return new Promise(function(res){ setTimeout(res, n * 1500 + 1000); }).then(function(){ return attempt(n+1); });
        }
      });
    }
    return attempt(1);
  }

  function loadSessionMeta(sk){
    if(!sk) return Promise.resolve();
    return fetchJSON(PROXY_URL+encodeURIComponent('/sessions')+'&session_key='+sk)
      .then(function(arr){
        if(arr&&arr.length){
          var s=arr[arr.length-1];
          if(s.total_laps) S.totalLaps=s.total_laps;
          else if(s.number_of_laps) S.totalLaps=s.number_of_laps;
        }
      }).catch(function(){});
  }

  resolveSessionKey()
    .then(function(sk){ return Promise.all([loadDrivers(sk), loadSessionMeta(sk)]); })
    .then(function(){ startLive(); });

  apiFetchRaw('/meetings',{year:Math.max(new Date().getFullYear(),2026)})
    .then(function(data){
      BR.meetings=(Array.isArray(data)?data:[]).filter(function(m){return !m.is_cancelled;});
    }).catch(function(){});
})();

</script>

</body>

</html>