webadmin.php

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

<?php
/**
 * F1 Live Timing Dashboard — v2.0
 * PHP 5.3+ compatible · Uses OpenF1 API (https://openf1.org)
 *
 */

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

function openf1_get($endpoint, $params = array()) {
    $url = OPENF1_BASE . $endpoint;
    if (!empty($params)) {
        $url .= '?' . http_build_query($params);
    }

    $raw = false;

    // Variante 1 (ehem. #5): cURL, SSL-Verify deaktiviert, Redirects folgen
    // Beste Kompatibilität für Windows / Apache 2.2 ohne CA-Bundle
    if ($raw === false && 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,     array(
            'Accept: application/json',
            'User-Agent: F1-Dashboard/2.0',
        ));
        $raw = curl_exec($ch);
        if (curl_errno($ch)) { $raw = false; }
        curl_close($ch);
    }

    // Variante 2 (ehem. #1): file_get_contents, SSL-Verify deaktiviert
    if ($raw === false) {
        $ctx = stream_context_create(array(
            'http' => array(
                'timeout'       => 9,
                'ignore_errors' => true,
                'header'        => "Accept: application/json\r\nUser-Agent: F1-Dashboard/2.0\r\n",
            ),
            'ssl'  => array(
                'verify_peer'      => false,
                'verify_peer_name' => false,
            ),
        ));
        $raw = @file_get_contents($url, false, $ctx);
    }

    // Variante 3 (ehem. #2): file_get_contents, Standard-SSL
    if ($raw === false) {
        $ctx = stream_context_create(array(
            'http' => array(
                'timeout'       => 9,
                'ignore_errors' => true,
                'header'        => "Accept: application/json\r\nUser-Agent: F1-Dashboard/2.0\r\n",
            ),
        ));
        $raw = @file_get_contents($url, false, $ctx);
    }

    // Variante 4 (ehem. #3): cURL, SSL-Verify aktiv
    if ($raw === false && 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, true);
        curl_setopt($ch, CURLOPT_HTTPHEADER,     array(
            'Accept: application/json',
            'User-Agent: F1-Dashboard/2.0',
        ));
        $raw = curl_exec($ch);
        if (curl_errno($ch)) { $raw = false; }
        curl_close($ch);
    }

    // Variante 5 (ehem. #4): file_get_contents ohne Context (letzter Fallback)
    if ($raw === false) {
        $raw = @file_get_contents($url);
    }

    if ($raw === false) return array();
    $decoded = json_decode($raw, true);
    return is_array($decoded) ? $decoded : array();
}

// 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;

// 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;

$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:       68px;
  /* 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(--t2);letter-spacing:1.5px;flex-shrink:0;
}
.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 220px 100px 100px 100px 100px 58px 45px 45px;
  align-items:center;gap:4px;
  min-width:1210px;
}
/* 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:center;gap:5px;padding:0 2px;}
.sg{display:flex;gap:2px;align-items: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;height:24px;background:var(--border2);flex-shrink:0;}

.sector-times{
  display:flex;
  justify-content:space-between;
  margin-top:3px;
  font-family:var(--fmono);
  font-size:11px;
  letter-spacing:.5px;
}

.st{
  width:33%;
  text-align:center;
}

.st.purple{ color:var(--purple); }
.st.green { color:var(--green); }
.st.yellow{ color:var(--yellow); }

/* 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;
}
.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;}
.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;}
.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 $circuit_name; ?> &mdash; <?php echo $session_name; ?></div>
    <div class="h-meta" id="hdr-meta">
      <?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
    </div>
  </div>
  <div class="h-badge <?php echo $badge_class; ?>" id="hdr-badge"><?php echo strtoupper($session_type ? $session_type : 'SESSION'); ?></div>
  <div class="live-badge" id="live-badge"><div class="live-dot"></div><span id="lbt">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 class="si" style="margin-left:auto;">Next refresh in&nbsp;<strong id="scd">&#8212;</strong>s</div>
  </div>

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

<!-- ═══════ JAVASCRIPT ═══════ -->
<script>
/* ══ CONFIG ═══════════════════════════════════════════════════ */
var API    = 'https://api.openf1.org/v1';
var LIVESK = <?php echo json_encode($session_key); ?>;  // PHP bootstrapped session key
var CURSK  = LIVESK;
var IS_LV  = true;
var RF_MS  = 10000;  // live refresh interval (erhöht auf 10 Sekunden)

/* ══ 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:{},intervals:{},pits:{},
  currentTyre:{},weather:null,raceControl:[],fastestLap:null,maxLap:0,totalLaps:0,
};

/* ══ 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 '&#8212;';
  
  let num;
  // Falls ein String wie "1:23.456" oder "23.456" geliefert wird
  if (typeof s === 'string' && s.indexOf(':') !== -1) {
    let parts = s.split(':');
    let minutes = parseFloat(parts[0]);
    let seconds = parseFloat(parts[1]);
    if (!isNaN(minutes) && !isNaN(seconds)) {
      num = minutes * 60 + seconds;
    } else {
      return s; // Fallback: Zeige den Original-String an
    }
  } else {
    num = parseFloat(s);
  }
  
  if (isNaN(num)) return '&#8212;';
  
  let m = Math.floor(num / 60);
  let sc = (num % 60).toFixed(3);
  if (sc < 10) sc = '0' + sc;
  return m > 0 ? m + ':' + sc : sc;
}
// ============================================================

function fmtG(s){
  if(s==null||s===''||s===undefined) return '&#8212;';
  var n=parseFloat(s);
  if(isNaN(n)) return String(s); // e.g. "LAP" for one lap down
  return n===0?'&#8212;':'+'+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 renderSectors(lap, dn){
  if(!lap) return '<div class="csectors">NO DATA</div>';

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

  var t1=lap.sector_1_time;
  var t2=lap.sector_2_time;
  var t3=lap.sector_3_time;

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

  return `
  <div>
    <div class="csectors">
      <div class="sg">${renderSegs(s1)}</div>
      <span class="sdiv"></span>
      <div class="sg">${renderSegs(s2)}</div>
      <span class="sdiv"></span>
      <div class="sg">${renderSegs(s3)}</div>
    </div>

    <div class="sector-times">
      <div class="st ${c1}">${fmtL(t1)}</div>
      <div class="st ${c2}">${fmtL(t2)}</div>
      <div class="st ${c3}">${fmtL(t3)}</div>
    </div>
  </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 'yellow';

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

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

  // Standard (gelb)
  return 'yellow';
}


/* ══ API FETCH ══════════════════════════════════════════════ */
// Verbesserte fetchJSON mit exponentiellem Backoff bei 429 (max. 3 Versuche)
function fetchJSON(url, retries = 3) {
  function attempt(n) {
    return fetch(url).then(function(r) {
      if (r.status === 429 && n < retries) {
        var delay = Math.pow(2, n) * 1000; // 1s, 2s, 4s
        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=API+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=API+ep+'?';
  var ks=Object.keys(params||{}),parts=[];
  for(var i=0;i<ks.length;i++){parts.push(encodeURIComponent(ks[i])+'='+encodeURIComponent(params[ks[i]]));}
  url+=parts.join('&');
  return fetchJSON(url);
}
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
        ? API+'/race_control?session_key=latest'
        : API+'/race_control?session_key='+encodeURIComponent(CURSK);
      fetch(rcUrl).then(function(r){return r.json();}).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(API+'/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;
  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.positions=Object.keys(pm).map(function(k){return pm[k];}).sort(function(a,b){return a.position-b.position;});
}
function processLaps(r){
  if(!r.ok) return;
  S.laps={};S.bestLaps={};
  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&&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;
  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;
  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;
  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) S.raceControl=r.v.slice().reverse();}

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

  if(!S.laps) return;

  // S.laps ist ein Objekt mit dem neuesten Lap pro Fahrer, nicht alle Laps.
  // Für echte Sektorstatistiken brauchen wir alle Laps der Session.
  // Daher iterieren wir über RP.laps (falls vorhanden) oder über S.laps.
  var allLaps = (RP.active && RP.laps && RP.laps.length) ? RP.laps : Object.values(S.laps);
  for(var i=0;i<allLaps.length;i++){
    var lap = allLaps[i];
    var dn = lap.driver_number;
    if(!dn) continue;

    var t1 = lap.sector_1_time;
    var t2 = lap.sector_2_time;
    var t3 = lap.sector_3_time;

    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};
  }
}


/* ══ DATE UTILITY ═══════════════════════════════════════════ */
// 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||'');});}

/* ══ 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 ────────────
  DRV = {};
  fetchJSON('https://api.openf1.org/v1/drivers?session_key='+encodeURIComponent(sk))
    .then(function(arr){
      if(arr && arr.length){
        arr.forEach(function(d){
          DRV[d.driver_number]        = d;
          DRV[String(d.driver_number)]= d;
        });
      }
    })
    .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';
    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(API+'/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(){
  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=data;
    data.sort(function(a,b){return (a.date_start||'').localeCompare(b.date_start||'');});
    var html='<option value="">&#8212; Select Grand Prix &#8212;</option>';
    data.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=data;
    data.sort(function(a,b){return (a.date_start||'').localeCompare(b.date_start||'');});
    var html='<option value="">&#8212; Select Session &#8212;</option>';
    data.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;
  document.getElementById('skey').textContent=LIVESK;
  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';
  document.getElementById('replay-bar').className='replay-bar';
  closeBrowser();
  DRV = {};
  fetchJSON(API+'/drivers?session_key='+LIVESK)
    .then(function(arr){
      if(arr&&arr.length){arr.forEach(function(d){ DRV[d.driver_number]=d; DRV[String(d.driver_number)]=d; });}
    })
    .catch(function(){})
    .then(function(){ startLive(); });
}

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

function updateTower(){
  var el=document.getElementById('rows');
  if(!S.positions.length){
    el.innerHTML='<div class="nodata">NO POSITION DATA &mdash; WAITING FOR SESSION</div>';
    return;
  }
  if(S.maxLap){
    var total = S.totalLaps || (RP.active ? RP.max : 0);
    var ctr = 'LAP ' + S.maxLap + (total > 0 ? ' / ' + total : '');
    document.getElementById('lap-ctr').textContent = ctr;
  }

  var html='';
  S.positions.forEach(function(pos,idx){
    var dn=pos.driver_number;
    var d=getDriverInfo(dn)||{};
    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 col=tc(d);
    var posN=pos.position;
    var acr=d.name_acronym||(d.full_name?d.full_name.split(' ').pop().substring(0,3).toUpperCase():'???');
    var fullName=d.full_name||acr;
    var nameParts=fullName.trim().split(' ');
    var lastName=nameParts.pop();
    var firstName=nameParts.join(' ');
    var displayName=firstName
      ? '<span style="text-transform:uppercase;font-weight:700;color:'+col+'">'+lastName+'</span> <span style="font-weight:400;color:'+col+'">'+firstName+'</span>'
      : '<span style="text-transform:uppercase;font-weight:700;color:'+col+'">'+lastName+'</span>';
    var teamName=d.team_name||'';
    var txtCol=teamTxtColor(teamName,col);
    var abbr=teamAbbr(teamName);

    var lastT=lap?lap.lap_duration:null;
    var bestObj=S.bestLaps[dn];
    var bestT=bestObj?bestObj.t:null;

    var gH,gC;
    if(posN===1){gH='LEADER';gC='cgap lead';}
    else if(iv&&iv.gap_to_leader!==null&&iv.gap_to_leader!==undefined){gH=fmtG(iv.gap_to_leader);gC='cgap';}
    else{gH='&#8212;';gC='cgap';}

    var iH,iC;
    if(posN===1){iH='&#8212;';iC='cint lead';}
    else if(iv&&iv.interval!==null&&iv.interval!==undefined){iH=fmtG(iv.interval);iC='cint';}
    else{iH='&#8212;';iC='cint';}

    var ltC='ct'+ltCls(dn,lastT);
    var pC='cpos'+(posN===1?' p1':posN===2?' p2':posN===3?' p3':'');

    var gainedHtml;
    var gridPos = RP.gridOrder[dn] || RP.gridOrder[String(dn)];
    if(gridPos && posN && RP.active && RP.gridPositions.length > 0){
      var diff = gridPos - posN;
      if(diff > 0){
        gainedHtml = '<div class="cgained gup">+'+diff+'</div>';
      } else if(diff < 0){
        gainedHtml = '<div class="cgained gdown">'+diff+'</div>';
      } else {
        gainedHtml = '<div class="cgained gsame">&#8212;</div>';
      }
    } else {
      gainedHtml = '<div class="cgained gsame">&#8212;</div>';
    }

    html+='<div class="dr trow" style="--tc:'+col+';animation-delay:'+(idx*22)+'ms">'+
      '<div class="'+pC+'">'+posN+'</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">'+displayName+'</span><span class="dteam">'+(teamName||'&#8212;')+'</span></div>'+
      renderTyre(dn)+
      renderSectors(lap, dn)+
      '<div class="'+ltC+'">'+fmtL(lastT)+'</div>'+
      '<div class="ct">'+fmtL(bestT)+'</div>'+
      '<div class="'+gC+'">'+gH+'</div>'+
      '<div class="'+iC+'">'+iH+'</div>'+
      gainedHtml+
      '<div class="clap">'+(lap?lap.lap_number:'&#8212;')+'</div>'+
      '<div class="cpit'+(pits===0?' ns':'')+'">'+( pits>0?pits:'&#8212;')+'</div>'+
    '</div>';
  });
  el.innerHTML=html;
}

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);
}

function updateRC(){
  var el=document.getElementById('rc-list');
  var cntEl=document.getElementById('rc-cnt');
  if(!S.raceControl.length){
    el.innerHTML='<div class="nodata">NO MESSAGES</div>';
    cntEl.innerHTML='&mdash;';
    return;
  }
  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');

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

  var curLap = S.maxLap;
  var driverLastLap = {};
  Object.keys(S.laps).forEach(function(dn){
    driverLastLap[String(dn)] = S.laps[dn].lap_number || 0;
  });

  var starters = {};
  RP.laps.forEach(function(l){ if(l.lap_number >= 1) starters[String(l.driver_number)] = 1; });

  var dnfs = [];
  Object.keys(starters).forEach(function(dnStr){
    var dn = parseInt(dnStr,10);
    var lastLap = driverLastLap[dnStr] || 0;
    if(lastLap > 0 && (curLap - lastLap) >= 5){
      dnfs.push({dn:dn, 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||'—';
    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();

/* ══ LIVE LOOP ══════════════════════════════════════════════ */
var _liveTimer=null,_cdTimer=null,_cd=Math.round(RF_MS/1000);
function startLive(){
  stopLive();
  if(!IS_LV) return;
  fetchAll();
  _cd=Math.round(RF_MS/1000);
  _cdTimer=setInterval(function(){
    _cd--;
    document.getElementById('scd').textContent=_cd;
    if(_cd<=0){_cd=Math.round(RF_MS/1000);if(IS_LV)fetchAll();}
  },1000);
}
function stopLive(){if(_cdTimer){clearInterval(_cdTimer);_cdTimer=null;}_liveTimer=null;}

/* ══ INIT ═══════════════════════════════════════════════════ */
(function init(){
  function resolveSessionKey(){
    if(LIVESK && LIVESK!==0) return Promise.resolve(LIVESK);
    return fetchJSON(API+'/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 = API+'/drivers?session_key='+encodeURIComponent(sk);
    function tryLoad(){
      return fetchJSON(url).then(function(arr){
        if(arr && arr.length){
          arr.forEach(function(d){ DRV[d.driver_number]=d; DRV[String(d.driver_number)]=d; });
          return true;
        }
        return false;
      }).catch(function(){ return false; });
    }
    return tryLoad().then(function(ok){
      if(!ok){
        return new Promise(function(res){ setTimeout(res, 1500); }).then(tryLoad);
      }
    });
  }

  function loadSessionMeta(sk){
    if(!sk) return Promise.resolve();
    return fetchJSON(API+'/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=data;}).catch(function(){});
})();
</script>
</body>
</html>