webadmin.php

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

<?php
/**
 * F1 Live Timing Dashboard — v2.0
 * PHP 5.3+ compatible · Uses OpenF1 API (https://openf1.org)
 *
 * NEW in v2:
 *   - Full English UI
 *   - Larger, high-contrast Titillium Web font (closest to official F1 typeface)
 *   - Session Browser: browse & load any past Grand Prix session
 *   - Lap-by-lap Replay with Play/Pause/Speed controls
 *   - Mini-sector visualisation: purple / green / yellow per F1 TV standard
 *   - Tyre compound badges (S/M/H/I/W) + age in laps
 *   - Gap to Leader AND Interval to car ahead (two separate columns)
 *   - Weather with humidity & pressure
 *   - Fastest Laps sidebar panel
 *   - Race Control messages with flag colour coding
 */

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',
    'Mercedes'        => '#27F4D2',
    'McLaren'         => '#FF8000',
    'Aston Martin'    => '#229971',
    'Alpine'          => '#FF87BC',
    'Williams'        => '#64C4FF',
    'RB'              => '#6692FF',
    'Haas F1 Team'    => '#B6BABD',
    'Kick Sauber'     => '#52E252',
);

$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>F1 Live Timing &middot; <?php echo $circuit_name; ?></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-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:16px;font-weight:900;
  color:var(--t2);letter-spacing:4px;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:17px;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(--fui);font-size:13px;font-weight:400;
  color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.h-badge{
  font-family:var(--fui);font-size:11px;font-weight:700;
  letter-spacing:2.5px;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--radius);border:1px solid;
  flex-shrink:0;
}
.h-badge.race    {border-color:var(--red);   color:var(--red);}
.h-badge.qualify {border-color:var(--orange);color:var(--orange);}
.h-badge.practice{border-color:var(--t3);    color:var(--t3);}

.live-badge{
  display:flex;align-items:center;gap:8px;
  padding:6px 14px;border:1px solid var(--live);border-radius:var(--radius);
  font-family:var(--fui);font-size:12px;font-weight:700;letter-spacing:2.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 14px;border:1px solid var(--border2);border-radius:var(--radius);
  background:rgba(255,255,255,.04);
  font-family:var(--fui);font-size:12px;font-weight:600;
  letter-spacing:1px;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(--fui);font-size:11px;font-weight:700;
  letter-spacing:3px;color:var(--t2);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(--fui);font-size:10px;font-weight:700;
  letter-spacing:2.5px;color:var(--t3);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(--fui);font-size:12px;font-weight:700;
  letter-spacing:1.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(--fui);font-size:11px;letter-spacing:2px;
  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(--fui);font-size:11px;font-weight:700;
  letter-spacing:2.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(--fui);font-size:12px;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:11px;font-weight:600;
  letter-spacing:3px;color:var(--white);text-transform:uppercase;
}
.ph-badge{font-family:var(--fmono);font-size:13px;color:var(--orange);letter-spacing:.5px;}

/* ═══════════════════════════════════════════
   TIMING TOWER — GRID TEMPLATE
   col: POS | TEAM | NUM | DRIVER | TYRE | SECTORS | LAST | BEST | GAP | INT | 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(90px,1fr) 65px 180px 110px 110px 110px 110px 45px 45px;
  align-items:center;gap:4px;
  min-width:954px;
}
/* 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:16px;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(--fui);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;}

/* 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:16px;font-weight:500;color:var(--gap-lead);text-align:right;white-space:nowrap;padding-right:6px;letter-spacing:.6px;}
.cgap.lead{
  font-family:var(--ff1);font-size:12px;font-weight:700;
  letter-spacing:1.5px;color:var(--gold);text-transform:uppercase;
}

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

/* Lap # */
.clap{font-family:var(--fmono);font-size:15px;color:var(--t2);text-align:center;}

/* 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(--fui);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(--fui);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;}

/* Fastest Laps */
.fl-row{
  display:grid;grid-template-columns:32px 46px 1fr 100px;
  gap:6px;align-items:center;padding:9px 16px;
  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:700;text-align:center;}
.fl-name{
  font-family:var(--ff1);font-size:15px;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;}

/* ═══════════════════════════════════════════
   STATUS BAR
   ═══════════════════════════════════════════ */
.status-bar{
  grid-column:1 / -1;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:9px 16px;background:var(--bg1);
  border:1px solid var(--border);border-radius:var(--radius);
  font-family:var(--fui);font-size:12px;font-weight:500;color:var(--t2);
}
.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(--fui);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()">
        <option value="2023">2023</option>
        <option value="2024">2024</option>
        <option value="2025">2025</option>
        <option value="2026" selected>2026</option>
      </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">F1</div>
    <div class="h-logo-sub">Live Timing</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(--fui);font-size:11px;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">&#9201; Timing Tower</span>
      <span class="ph-badge" id="lap-ctr">&#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">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">&#128504; Fastest Laps</span></div>
      <div id="fl-list"><div class="nodata">Loading&#8230;</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>

  </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  = 7000;  // live refresh interval

/* ══ 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-2025 ═════════ */
// 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'},
    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'},
    6: {full_name:'Nicholas Latifi',     name_acronym:'LAT',team_name:'Williams',                  team_colour:'64C4FF'},
    7: {full_name:'Nyck de Vries',       name_acronym:'DEV',team_name:'Scuderia AlphaTauri',       team_colour:'5E8FAA'},
  },
  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'},
    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'},
    40:{full_name:'Liam Lawson',         name_acronym:'LAW',team_name:'Visa CashApp Racing Bulls', team_colour:'6692FF'},
    7: {full_name:'Jack Doohan',         name_acronym:'DOO',team_name:'Alpine F1 Team',            team_colour:'FF87BC'},
    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'},
    6: {full_name:'Isack Hadjar',        name_acronym:'HAD',team_name:'Visa CashApp Racing Bulls', team_colour:'6692FF'},
  },
  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'},
  }
};

// Return driver info: in replay mode prefer HIST_DRIVERS, else API data
function getDriverInfo(dn){
  var dnInt = parseInt(dn,10);
  var dnStr = String(dnInt);
  if(RP.active && RP.year){
    var yr = RP.year;
    // Check exact year first, then adjacent years as fallback
    var years = [yr, yr-1, yr+1];
    for(var yi=0;yi<years.length;yi++){
      var hd = HIST_DRIVERS[years[yi]];
      if(hd && hd[dnInt]) return hd[dnInt];
      if(hd && hd[dnStr]) return hd[dnStr];
    }
  }
  return DRV[dnInt] || DRV[dnStr] || 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',
};
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,
};

/* ══ 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:{},gridOrder:{},
};

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

/* ══ 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';
}
function fmtL(s){
  if(s==null||isNaN(s)) return '&#8212;';
  var m=Math.floor(s/60);
  var sc=(s%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)<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;
}
function renderSectors(lap){
  if(!lap) return '<div class="csectors"><span style="font-family:var(--fui);font-size:10px;color:var(--t3);letter-spacing:1px;">NO DATA</span></div>';
  var s1=lap.segments_sector_1||[];
  var s2=lap.segments_sector_2||[];
  var s3=lap.segments_sector_3||[];
  if(!s1.length&&!s2.length&&!s3.length){
    return '<div class="csectors"><span class="sg"><span class="seg sn"></span><span class="seg sn"></span><span class="seg sn"></span></span><span class="sdiv"></span><span class="sg"><span class="seg sn"></span><span class="seg sn"></span><span class="seg sn"></span></span><span class="sdiv"></span><span class="sg"><span class="seg sn"></span><span class="seg sn"></span><span class="seg sn"></span></span></div>';
  }
  return '<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>';
}
function renderTyre(dn){
  var info=S.currentTyre[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>';
}

/* ══ API FETCH ══════════════════════════════════════════════ */
function apiFetch(ep,extra,key){
  var sk=key!=null?key: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 fetch(url).then(function(r){if(!r.ok)throw new Error('HTTP '+r.status);return r.json();});
}
function apiFetchRaw(ep,params){
  var url=API+ep+'?';
  var ks=Object.keys(params||{});
  var parts=[];
  for(var i=0;i<ks.length;i++){parts.push(encodeURIComponent(ks[i])+'='+encodeURIComponent(params[ks[i]]));}
  url+=parts.join('&');
  return fetch(url).then(function(r){if(!r.ok)throw new Error('HTTP '+r.status);return r.json();});
}
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]);
    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.values(pm).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])) S.bestLaps[dn]=l.lap_duration;
  });
  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;
}
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(-20).reverse();}

/* ══ 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;}
}

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

  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('/drivers',null,sk),
    apiFetch('/pit',null,sk),
  ]).then(function(res){

    if(res[6].ok) res[6].v.forEach(function(d){
      DRV[d.driver_number]=d; DRV[String(d.driver_number)]=d;
    });

    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[7].ok?res[7].v:[];

    function byDate(arr){arr.sort(function(a,b){return (a.date||'').localeCompare(b.date||'');});}
    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
    // Median avoids SC/DNF outliers; +90s accounts for OpenF1 recording delay
    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);
    });

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

    // Find the qualifying session that set the grid
    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 doRender(){
      renderReplayLap(1);
      setStatus(true,'Historical session loaded · '+RP.laps.length+' laps'
        +(gridSK?' · grid from quali #'+gridSK:''));
    }

    if(gridSK){
      apiFetch('/laps',null,gridSK).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{dn:parseInt(dn,10),t:best[dn]};
        }).sort(function(a,b){return a.t-b.t;});
        sorted.forEach(function(item,i){
          RP.gridOrder[item.dn]=i+1;
          RP.gridOrder[String(item.dn)]=i+1;
        });
        doRender();
      }).catch(function(){ doRender(); });
    } else {
      doRender();
    }

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

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

  // Scan a sorted-ascending array backwards for latest entry <= cutoff
  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 back to previous lap)
  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])) S.bestLaps[dn]=l.lap_duration;
  });
  S.fastestLap=fd?{dn:fd,t:ft}:null;
  S.maxLap=n;

  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 ─────────────────────────────────────────────────────
  // LAP 1 → starting grid (positions recorded BEFORE lights out)
  // LAP 2+ → race positions after that lap completed (three-phase lookup)
  var posArr=[];

  if(n===1){
    // STARTING GRID: prefer qualifying-derived order, fall back to earliest telemetry
    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});
      });
      // Drivers not in grid (pit lane start, etc.): append after grid
      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 {
      // No qualifying data — use first recorded position entry per driver
      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){
    // Lap 2+: use positions after lap N completed (three-phase)
    // Phase A: driver's own lap-N end + 90s buffer (most precise)
    // Phase B: global median cutoff + 90s buffer
    // Phase C: last known entry anywhere in session (last resort)
    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);
      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 {
      // No position data at all — sort by laps completed then cumulative time
      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 — same three-phase lookup ────────────────────────────
  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&&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;
        S.currentTyre[dn]={compound:st.compound,age:age,_sn:st.stint_number};
      }
    }
  });

  // ── 6. Race Control + Weather ─────────────────────────────────────────
  if(globalCutoff){
    var rcF=[];
    for(var ri=0;ri<RP.rc.length;ri++){
      if((RP.rc[ri].date||'')<=globalCutoff) rcF.push(RP.rc[ri]);
    }
    S.raceControl=rcF.slice(-20).reverse();
    var wxBest=null;
    for(var wi=0;wi<RP.wx.length;wi++){
      if((RP.wx[wi].date||'')<=globalCutoff) wxBest=RP.wx[wi];
    }
    S.weather=wxBest||(RP.wx.length?RP.wx[0]:null);
  } else {
    S.raceControl=RP.rc.slice(-20).reverse();
    S.weather=RP.wx.length?RP.wx[RP.wx.length-1]:null;
  }

  updateDOM();
}


function rpNext(){if(RP.cur<RP.max)renderReplayLap(RP.cur+1);else stopPP();}
function rpPrev(){if(RP.cur>1)renderReplayLap(RP.cur-1);}
function togglePP(){if(RP.playing)stopPP();else startPP();}
function startPP(){
  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();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(!BR.meetings.length)onYearChange();}
}
function closeBrowser(){document.getElementById('browser').className='browser';}
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;
  // Update header
  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.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();
  startLive();
}

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

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) document.getElementById('lap-ctr').textContent='LAP '+S.maxLap;

  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;
    // Format: "LASTNAME Firstname" — split on last space
    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 bestT=S.bestLaps[dn];

    // Gap to leader
    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';}

    // Interval
    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';}

    // Lap time class
    var ltC='ct'+ltCls(dn,lastT);

    // Pos class
    var pC='cpos'+(posN===1?' p1':posN===2?' p2':posN===3?' p3':'');

    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)+
      '<div class="'+ltC+'">'+fmtL(lastT)+'</div>'+
      '<div class="ct">'+fmtL(bestT)+'</div>'+
      '<div class="'+gC+'">'+gH+'</div>'+
      '<div class="'+iC+'">'+iH+'</div>'+
      '<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;';};
  document.getElementById('wx-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');
  if(!S.raceControl.length){el.innerHTML='<div class="nodata">NO MESSAGES</div>';return;}
  document.getElementById('rc-cnt').textContent=S.raceControl.length+' Messages';
  var html='';
  S.raceControl.forEach(function(m){
    var flag=(m.flag||'').toUpperCase();
    var cat=(m.category||'').toUpperCase();
    var cls='',badge='';
    if(flag.indexOf('YELLOW')!==-1){cls='my';badge='<span class="fchip y">YEL</span>';}
    else if(flag.indexOf('RED')!==-1){cls='mr';badge='<span class="fchip r">RED</span>';}
    else if(flag.indexOf('SAFETY')!==-1||cat.indexOf('SAFETY')!==-1){cls='ms';badge='<span class="fchip s">SC</span>';}
    else if(flag.indexOf('VIRTUAL')!==-1){cls='mv';badge='<span class="fchip s">VSC</span>';}
    else if(cat.indexOf('DRS')!==-1){cls='md';badge='<span class="fchip d">DRS</span>';}
    html+='<div class="rcm '+cls+'"><div class="rct">'+fmtT(m.date)+'</div><div class="rcm-txt">'+badge+(m.message||'&#8212;')+'</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){return{dn:parseInt(dn,10),t:S.bestLaps[dn]};}).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||d.full_name||'#'+item.dn)+'</div>'+
      '<div class="fl-time '+(isBest?'pb':'nm')+'">'+fmtL(item.t)+'</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(){
  if(_liveTimer||!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(){
  // Step 1: Ensure we have a valid session key.
  // If PHP bootstrapped LIVESK=0 (server-side API call failed),
  // fetch the latest session key directly from the browser.
  function resolveSessionKey(){
    if(LIVESK && LIVESK!==0) return Promise.resolve(LIVESK);
    return fetch(API+'/sessions?session_key=latest')
      .then(function(r){return r.json();})
      .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;});
  }

  // Step 2: Load drivers for the resolved session key.
  function loadDrivers(sk){
    if(!sk) return Promise.resolve();
    return fetch(API+'/drivers?session_key='+sk)
      .then(function(r){return r.json();})
      .then(function(arr){
        if(arr&&arr.length){
          arr.forEach(function(d){
            DRV[d.driver_number]=d;
            DRV[String(d.driver_number)]=d;  // ensure both key types work
          });
        }
      }).catch(function(){});
  }

  // Step 3: Start live polling only after drivers are ready.
  resolveSessionKey()
    .then(function(sk){ return loadDrivers(sk); })
    .then(function(){ startLive(); });

  // Pre-load meetings in background for fast session browser open
  apiFetchRaw('/meetings',{year:new Date().getFullYear()})
    .then(function(data){BR.meetings=data;}).catch(function(){});
})();
</script>
</body>
</html>