/*!
 * VBOX Video Telemetry — live viewer
 * Copyright (c) 2026 Racelogic Ltd. All rights reserved.
 *
 * Proprietary and confidential. This software is licensed, not sold, under the
 * Racelogic commercial licence agreement. Copying, modification, redistribution
 * or reverse engineering without prior written permission is prohibited.
 */:root{color-scheme:dark;--bg: #0b0d10;--fg: #e7ebf0;--muted: #9aa4af;--accent: #4cc9ff}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;height:100%}body{display:flex;flex-direction:column;align-items:center;padding:16px;gap:12px}.stages{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:min(100vw - 32px,1600px)}.stages.single{grid-template-columns:1fr;width:min(100vw - 32px,calc((100vh - 210px) * 16 / 9),2400px)}.stage{position:relative;aspect-ratio:16 / 9;background:#000;border-radius:8px;overflow:hidden;box-shadow:0 10px 30px #00000080;border:2px solid transparent;transition:border-color .15s ease;cursor:pointer;min-width:0}.stage.primary{border-color:var(--accent);cursor:default}.cam-video{width:100%;height:100%;display:block;object-fit:contain;background:#000}.cam-label{position:absolute;top:8px;left:8px;font-size:12px;font-weight:600;letter-spacing:.05em;color:#ffffffd9;background:#0000008c;padding:4px 10px;border-radius:4px;pointer-events:none;z-index:3}.cam-label .primary-tag{display:none;margin-left:6px;color:var(--accent);font-size:10px}.stage.primary .cam-label .primary-tag{display:inline}.btn.off{background:#2a3a4a;color:var(--muted)}#unitBar{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.05em;color:#ffffffd9}#unitBar select{background:#141a22;color:var(--fg);border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:4px 8px;font-size:13px}@media (max-width: 900px){.stages{grid-template-columns:1fr}}.btn{background:var(--accent);color:#002633;border:0;border-radius:6px;padding:8px 14px;font-weight:600;font-size:14px;cursor:pointer}.btn:hover{filter:brightness(1.1)}#rpb{position:fixed;inset:0;display:none;background:#000;z-index:40}#rpb.show{display:block}#rpbv{position:absolute;inset:0 0 84px;width:100%;height:calc(100% - 84px);background:#000}#rpbbar{position:absolute;left:0;right:0;bottom:0;height:84px;display:flex;gap:14px;align-items:center;padding:0 18px;background:#0f1216f2}#rpblive{padding:12px 22px;border-radius:8px;border:0;font-size:16px;font-weight:700;background:#2a7;color:#fff;cursor:pointer}#rpbslider{flex:1;-webkit-appearance:none;appearance:none;height:10px;border-radius:5px;background:#333;outline:none;cursor:pointer}#rpbslider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--accent);border:2px solid #0b0d10}#rpbslider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent);border:2px solid #0b0d10}#rpbslider::-moz-range-track{background:transparent}#rpbpp{padding:12px 20px;border-radius:8px;border:0;font-size:15px;font-weight:700;background:#2a3138;color:#e7ebf0;cursor:pointer}.rpbskip{padding:12px;border-radius:8px;border:0;font-size:14px;font-weight:700;background:#2a3138;color:#9fb6c9;cursor:pointer;white-space:nowrap}#rpbsnap{padding:12px 18px;border-radius:8px;border:0;font-size:15px;font-weight:700;background:#2a7;color:#fff;cursor:pointer;white-space:nowrap}#rpbwin{padding:12px 10px;border-radius:8px;border:0;font-size:15px;font-weight:700;background:#2a3138;color:#9d8cff;cursor:pointer;min-width:86px;-webkit-appearance:none;appearance:none;text-align:center}#rpbspd{padding:12px 10px;border-radius:8px;border:0;font-size:15px;font-weight:700;background:#2a3138;color:#fc6;cursor:pointer;min-width:76px;-webkit-appearance:none;appearance:none;text-align:center}#rpbq{padding:12px 18px;border-radius:8px;border:0;font-size:15px;font-weight:700;background:#2a3a4a;color:var(--accent);cursor:pointer}#rpbtime{min-width:180px;text-align:right;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums;font-family:ui-monospace,Consolas,monospace}.map-stage{position:relative;aspect-ratio:16 / 9;background:#0b0d10;border-radius:8px;overflow:hidden;box-shadow:0 10px 30px #00000080;border:2px solid transparent;min-width:0}.map-window.map-tile{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;border:0}.map-window{position:absolute;top:clamp(6px,1.4%,16px);right:clamp(6px,1.4%,16px);width:clamp(110px,26%,320px);aspect-ratio:4 / 3;border-radius:clamp(4px,1cqi,8px);overflow:hidden;box-shadow:0 6px 20px #00000080;border:1px solid rgba(255,255,255,.15);background:#0b0d10;transition:opacity .2s ease;container-type:inline-size;z-index:2}.map-window.hidden{opacity:0;pointer-events:none}.map-window.off{display:none}.map-window.loading{opacity:0}#recenter{display:none;position:absolute;bottom:clamp(6px,3cqi,14px);left:clamp(6px,3cqi,14px);z-index:3;background:#0a0e14bf;color:var(--accent);border:1px solid rgba(76,201,255,.5);border-radius:6px;padding:max(4px,1.6cqi) max(8px,2.6cqi);font-size:max(10px,3.2cqi);font-weight:600;cursor:pointer}#recenter.show{display:block}#recenter:hover{background:#141e28e6}#tilt{position:absolute;top:clamp(6px,3cqi,14px);right:clamp(6px,3cqi,14px);z-index:3;background:#0a0e14bf;color:var(--accent);border:1px solid rgba(76,201,255,.5);border-radius:6px;padding:max(4px,1.6cqi) max(8px,2.6cqi);font-size:max(10px,3.2cqi);font-weight:600;cursor:pointer}#tilt:hover{background:#141e28e6}#north{position:absolute;top:calc(clamp(6px,3cqi,14px)*2 + max(10px,3.2cqi) + 2*max(4px,1.6cqi) + 2px);right:clamp(6px,3cqi,14px);z-index:3;background:#0a0e14bf;color:var(--accent);border:1px solid rgba(76,201,255,.5);border-radius:6px;padding:max(4px,1.6cqi) max(8px,2.6cqi);font-size:max(10px,3.2cqi);font-weight:600;cursor:pointer}#north:hover{background:#141e28e6}.vtag{position:relative;min-width:88px;background:#0a0e148c;border:1px solid rgba(76,201,255,.4);border-radius:7px;overflow:hidden;text-align:center;font-family:inherit;box-shadow:0 3px 10px #00000059}.vtag-band{display:flex}.vtag-seg{flex:1;font-size:8px;font-weight:700;letter-spacing:.4px;padding:3px 0 2px;background:#333a4199;color:#889}.vtag-seg+.vtag-seg{border-left:1px solid rgba(10,14,20,.6)}.vtag-seg.unk{opacity:.45}.vtag-seg.on{background:#0a1636;color:#cfe0ff;animation:uk-strobe 1s step-end infinite}.vtag-seg.siren.on{animation-delay:-.5s}@keyframes uk-strobe{0%{background:#2f6bff;color:#fff;box-shadow:inset 0 0 8px 1px #bed7fff2}6%{background:#0a1636;color:#cfe0ff;box-shadow:none}12%{background:#2f6bff;color:#fff;box-shadow:inset 0 0 8px 1px #bed7fff2}18%{background:#0a1636;color:#cfe0ff;box-shadow:none}to{background:#0a1636}}.vtag-body{padding:4px 7px 6px}.vtag-cs{color:#fff;font-weight:700;font-size:12px;letter-spacing:.4px;cursor:pointer;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.8)}.vtag-cam{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;margin-top:4px;border:0;border-radius:4px;padding:3px 0;background:#4cc9ffd9;color:#002633;font-size:10px;font-weight:700;cursor:pointer}.vtag-cam svg{width:11px;height:11px}.vtag-cam:hover{background:var(--accent)}.vtag-stem{position:absolute;left:50%;bottom:-6px;width:10px;height:10px;transform:translate(-50%) rotate(45deg);background:#0a0e148c;border-right:1px solid rgba(76,201,255,.4);border-bottom:1px solid rgba(76,201,255,.4)}.map-window .maplibregl-ctrl-top-left{top:0;left:0}.map-window .maplibregl-ctrl-top-left .maplibregl-ctrl{margin:max(4px,1.6cqi) 0 0 max(4px,1.6cqi)}.map-window .maplibregl-ctrl-group button{width:clamp(18px,8cqi,30px);height:clamp(18px,8cqi,30px)}.map-window .maplibregl-ctrl-attrib{font-size:max(7px,2.8cqi);background:#0a0e1499;color:#ffffff8c;padding:0 4px}.map-window .maplibregl-ctrl-attrib a{color:#ffffffbf}.map-window .maplibregl-ctrl-bottom-right{bottom:0;right:0}.car-marker{width:clamp(14px,8cqi,28px);height:clamp(14px,8cqi,28px);display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.85))}.stage.cam-paused{opacity:.55;cursor:pointer}.stage.cam-paused:after{content:"Tap to view live";position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;color:#fff;font:600 .95rem system-ui,sans-serif;background:#0006;pointer-events:none}