/* ==========================================================================
   Map Component Styles (Refactored for Stability & Zoom)
   ========================================================================== */

/* 1. 地图面板容器 - UI 锚点层 */
.map-panel { 
    /* 必须 relative 以便 UI 元素 (InfoCard, Log) 绝对定位 */
    position: relative !important; 
    
    /* [关键修复] 回归 Block 布局，避免 Flexbox 对绝对定位子元素的副作用 */
    display: block !important; 
    
    /* 确保填满 Grid */
    width: 100%; height: 100%;
    overflow: hidden !important; /* 防止 UI 溢出 */
    
    background-size: 40px 40px; 
    background-image: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px); 
    background-position: center; 
    box-shadow: inset 0 0 100px rgba(0,0,0,0.8); 
}

/* 2. 地图视口 - 独立的地图渲染区域 */
#map-viewport {
    position: absolute;
    top: 0; left: 0; 
    width: 100%; height: 100%;
    overflow: hidden;
    z-index: 0; /* 位于 UI 层之下 */
    
    /* [重构] 强制 Flex 居中作为默认布局 */
    /* 这是地图初始居中的"真理来源"，JS 只有在用户交互时才接管 */
    display: flex !important;
    justify-content: center;
    align-items: center;
}

/* 3. 地图包裹层 - 实际缩放对象 */
#map-wrapper { 
    position: relative; 
    
    /* [关键] 收缩包裹：确保尺寸紧贴图片 */
    display: inline-flex !important; 
    justify-content: center;
    align-items: center;
    
    /* 消除间隙 */
    line-height: 0 !important; 
    font-size: 0 !important;
    
    /* [V67.10] Performance: Remove expensive drop-shadow filter */
    /* filter: drop-shadow(0 0 40px rgba(var(--accent-rgb), 0.3)); */
    z-index: 1; 
    
    /* [V67.13] Performance: CSS Containment to limit repaint scope */
    contain: layout style;
    
    /* 缩放锚点设为左上角，配合 JS 矩阵计算 */
    /* [注意] 这里初始设为 center，交互开始后 JS 会接管改为 0 0 */
    transform-origin: center center; 
    
    /* [恢复] 移除 will-change 以恢复 SVG 无损缩放 */
    /* will-change: transform; */
}

/* [重构] 交互状态：JS 接管定位 */
#map-wrapper.interactive {
    position: absolute !important; 
    top: 0; left: 0; /* 必须归零，JS 负责具体 translate */
    transform-origin: 0 0 !important;
    cursor: grab;
    /* 移除 Flex 居中约束，完全由 transform 控制 */
    margin: 0 !important;
}
#map-wrapper.interactive.panning { cursor: grabbing; }

#map-wrapper.map-flash-green { 
    /* [Restored & Modified] Triggered by api.js logic */
    filter: drop-shadow(0 0 35px var(--accent-green)) !important;
    transition: filter 0.5s ease-out;
}

#map-wrapper.map-flash-purple { 
    /* [Restored & Modified] Triggered by api.js logic */
    filter: drop-shadow(0 0 45px var(--accent-purple)) !important;
    transition: filter 1s ease-out;
}

/* 4. 图片本身 */
#track-img, #track-svg { 
    display: block !important; 
    width: auto !important; height: auto !important; 
    max-width: 100% !important; 
    /* [Moved to style.css/responsive.css] Removed global restriction to fix Popout Map 80px gap */
    /* max-height: calc(100vh - 140px) !important; */
    margin: 0 !important;
    object-fit: contain !important;
    
    /* [优化] 启用平滑渲染，减少缩放时的锯齿和像素感 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    shape-rendering: geometricPrecision;
}

#track-img {
    /* [修复] 反色滤镜仅应用于 map.png，防止 svg 变色 */
    filter: var(--map-filter, invert(1) opacity(0.8)); 
}

#track-svg {
    /* 确保 SVG 始终以高质量渲染 */
    vector-effect: non-scaling-stroke;
    /* [修复] SVG 变亮问题：强制使用 sRGB 颜色空间渲染 */
    color-interpolation-filters: sRGB;
    /* 尝试移除混合模式或滤镜影响 */
    mix-blend-mode: normal;
    /* 确保 SVG 不受父级或自身滤镜影响 (如果之前有全局设置) */
    filter: none !important; 
}

/* [V67.12] Restore Interaction Performance Optimization */
#map-wrapper.interacting svg {
    /* Temporarily sacrifice quality for speed during drag/zoom */
    /* This prevents lag on high-DPI screens or complex paths */
    shape-rendering: optimizeSpeed !important;
    text-rendering: optimizeSpeed !important;
    
    /* Disable vector-effect to prevent expensive re-tessellation */
    vector-effect: none !important;
}

/* [V67.12] Fix Static Flickering: Force High Quality when Idle */
#map-wrapper:not(.interacting) svg {
    shape-rendering: geometricPrecision !important;
    text-rendering: geometricPrecision !important;
    /* Ensure no residual 'optimizeSpeed' remains */
}

/* 5. 圆点层 */
#dots-layer { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; 
}

/* 地图圆点 (Dot) */
.dot { 
    position: absolute; 
    /* 默认位置归零，完全由 transform 控制 */
    top: 0; left: 0;
    
    /* [架构] 使用 CSS 变量解耦缩放逻辑 */
    --dot-base-scale: calc(1 / var(--map-scale, 1));
    --dot-scale: var(--dot-base-scale);
    /* [架构] 位置变量 (由 JS 写入) */
    --tx: 0px;
    --ty: 0px;
    
    /* 反向缩放保持视觉大小，位置完全由变量驱动 */
    transform: translate(var(--tx), var(--ty)) translate(-50%, -50%) scale(var(--dot-scale)); 
    
    width: 14px; height: 14px; 
    background: #fff; border-radius: 50%; z-index: 100; 
    
    /* [优化] 统一使用 transform linear 实现同步平滑移动 */
    /* 注意：缩放动画也会变成 linear，这是为了保证移动平滑的必要妥协 */
    /* [V67.0] 添加 background-color 过渡以实现状态切换时的平滑变色 */
    transition: transform 0.22s linear, background-color 0.5s ease-out, border-color 0.5s ease-out; 
    
    /* [性能优化] 移除 box-shadow 改用 border 减少 GPU 光栅化开销 */
    /* 旧: width: 10px + box-shadow: 2px -> total 14px */
    /* 新: width: 14px + border: 2px (border-box) -> content 10px -> total 14px */
    box-shadow: none;
    border: 2px solid rgba(0,0,0,0.5);
    
    /* [恢复] 移除 will-change 防止创建过多 GPU 图层 (Layer Explosion) */
    /* will-change: transform; */
    
    /* [性能优化] 布局隔离 */
    contain: layout style;
}
.dot:hover, .dot.highlight { 
    /* [架构] 仅修改缩放倍率变量，位置仍由 JS 的 transform 控制 */
    --dot-scale: calc(var(--dot-base-scale) * 1.3);
    
    z-index: 99999 !important; 
    /* Hover 状态下保留光晕效果 (此时元素少，性能可接受) */
    box-shadow: 0 0 0 2px var(--accent-cyan), 0 0 15px var(--accent-cyan) !important; 
    border-color: transparent; /* 隐藏原本的边框 */
}
.dot.highlight .dot-label, .dot:hover .dot-label { display: block !important; color: #000 !important; border-color: #fff !important; background: #fff !important; font-weight: normal !important; text-shadow: none !important; }

/* Dot 特殊状态 */
/* [Performance] P1 Dot: Static Glow instead of expensive box-shadow animation */
.dot.p1 { 
    background: var(--accent-gold) !important; 
    width: 14px; height: 14px; 
    z-index: 150 !important; 
    /* Static strong shadow */
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0 0 20px var(--accent-gold) !important; 
    /* animation: pulse-gold 2s infinite; REMOVED */
}
.dot.p1:hover, .dot.p1.highlight { 
    box-shadow: 0 0 0 3px #fff, 0 0 30px var(--accent-gold) !important; 
    z-index: 99999 !important;
}
.dot.p1:hover .dot-label, .dot.p1.highlight .dot-label { background: var(--accent-gold) !important; color: #000 !important; border-color: #fff !important; }

.dot.battle { 
    background-color: #ff1100 !important; 
    border-color: #fff !important; 
    z-index: 500 !important; 
    /* [Performance] Removed expensive box-shadow animation */
    /* animation: pulse-battle 0.6s infinite ease-in-out; */
}
.dot.overtake { 
    background-color: var(--accent-green) !important; 
    border-color: #fff !important; 
    z-index: 600 !important; 
    /* [Performance] Removed expensive box-shadow animation */
    /* animation: flash-overtake 0.6s infinite ease-in-out !important; */
}

/* 涟漪效果 - Optimized using Transform Scale (GPU) */
.dot.battle::after, .dot.overtake::after { 
    content: ''; 
    position: absolute; 
    top: 50%; left: 50%; 
    /* Use fixed base size to ensure consistent scaling */
    width: 14px; height: 14px; 
    border-radius: 50%; 
    z-index: -1; 
    pointer-events: none; 
    /* [Performance] Hint for GPU promotion */
    will-change: transform, opacity;
}

.dot.battle::after { 
    border: 2px solid #ff1100; 
    background: rgba(255, 69, 0, 0.2); 
    /* [Performance] Use scale instead of width/height */
    animation: battle-ripple-opt 1s infinite ease-out; 
}

.dot.overtake::after { 
    border: 2px solid var(--accent-green); 
    background: transparent; 
    /* [Performance] Use scale instead of width/height */
    animation: overtake-ripple-opt 1s infinite ease-out; 
}

/* [Performance] New Optimized Keyframes using only Composite Properties (Transform/Opacity) */
@keyframes battle-ripple-opt {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; border-width: 2px; }
    100% { transform: translate(-50%, -50%) scale(4); opacity: 0; border-width: 0px; }
}

@keyframes overtake-ripple-opt {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; border-width: 3px; }
    100% { transform: translate(-50%, -50%) scale(5); opacity: 0; border-width: 0px; }
}

.dot.in-pit .dot-label { display: none !important; }
.dot.in-pit:hover .dot-label { display: block !important; }

/* 黄旗 */
.dot.yellow-flag { 
    width: 14px !important; height: 14px !important; 
    background-color: transparent !important; box-shadow: none !important; 
    z-index: 50 !important; animation: none !important; border: none !important; 
    /* 移除 transform 覆盖，保持位置同步 */
}
.dot.yellow-flag.yf-massive { z-index: 200 !important; }
.dot.yellow-flag::before { content: '⚠️'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; line-height: 1; z-index: 202; }

/* [V67.15] Performance: Optimized Ripple Animation using Transform Scale (Composite-only) */
.dot.yellow-flag::after { 
    content: ''; position: absolute; top: 50%; left: 50%; 
    width: 14px; height: 14px; /* Fixed Base Size */
    border-radius: 50%; 
    /* border: 1px solid var(--accent-gold); Thinner border */
    background: rgba(255, 215, 0, 0.4); 
    z-index: 201; 
    pointer-events: none;
    
    /* Animation */
    transform: translate(-50%, -50%) scale(1);
    animation: ripple-wave-normal 1.5s infinite ease-out;
    
    /* GPU Hint */
    will-change: transform, opacity;
}
.dot.yellow-flag.yf-massive::after { 
    animation: ripple-wave-massive 1.2s infinite ease-out !important; 
    background: rgba(255, 240, 0, 0.5); 
}

/* Tape Marker Yellow Flag Ripple (Shared) */
.tape-marker.yellow-flag::after { 
    content: ''; position: absolute; top: 50%; left: 50%; 
    width: 14px; height: 14px; 
    border-radius: 50%; 
    background: rgba(255, 215, 0, 0.4); 
    z-index: -1; 
    pointer-events: none;
    
    transform: translate(-50%, -50%) scale(1);
    animation: ripple-wave-normal 1.5s infinite ease-out;
    will-change: transform, opacity;
}
.tape-marker.yellow-flag.yf-massive::after { 
    animation: ripple-wave-massive 1.2s infinite ease-out !important; 
    background: rgba(255, 240, 0, 0.5); 
}

/* [V67.15] Optimized Keyframes: No Layout Triggers (width/height/border) */
@keyframes ripple-wave-normal { 
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } 
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; } 
}
@keyframes ripple-wave-massive { 
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; } 
    100% { transform: translate(-50%, -50%) scale(6); opacity: 0; } 
}
.dot-label { 
    position: absolute; top: -28px; left: 50%; transform: translateX(-50%); 
    width: max-content !important; min-width: 0 !important; max-width: none !important; white-space: nowrap !important; line-height: normal !important; 
    font-size: 12px; font-weight: 700; background: rgba(0,0,0,0.85); color: #fff; padding: 4px 10px; 
    border-radius: 4px; border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(4px); 
    display: block; pointer-events: none; transition: all 0.2s ease; z-index: 1000; 
}
.dot-label.lap-popup { transform: translateX(-50%) scale(1.3) !important; z-index: 2000 !important; color: var(--accent-cyan) !important; border-color: var(--accent-cyan) !important; box-shadow: 0 0 15px var(--accent-cyan) !important; }
.dot-label.pb { background-color: var(--accent-green) !important; color: #000 !important; border-color: #fff !important; box-shadow: 0 0 15px var(--accent-green) !important; }
.dot-label.sb { background-color: var(--accent-purple) !important; color: #fff !important; border-color: #fff !important; box-shadow: 0 0 20px var(--accent-purple) !important; }

/* [User Request] PC Adaptive Label Scaling (1x -> 2x) */
@media screen and (min-width: 1000px) {
    .dot-label {
        /* [V69.1] Adjusted for 1000px+ Viewport */
        /* Reduce scaling factor from 0.3333 to 0.1 to prevent excessive growth */
        /* This makes labels grow slightly with map, but much less aggressively */
        --label-scale: clamp(1, 1 + (var(--map-scale, 1) - 1) * 0.1, 1.3);
        transform: translateX(-50%) scale(var(--label-scale));
        transform-origin: bottom center;
    }
    
    /* [User Request] PC Adaptive Dot Scaling (1x -> 1.5x) */
    /* Map Scale 1x -> Dot 1x; Map Scale 4x -> Dot 1.5x */
    /* Formula: 1 + (scale - 1) * 0.1666 */
    .dot {
        --dot-base-scale: calc(1 / var(--map-scale, 1) * clamp(1, 1 + (var(--map-scale, 1) - 1) * 0.1666, 1.5));
    }
    
    .dot-label.lap-popup {
        transform: translateX(-50%) scale(calc(var(--label-scale) * 1.3)) !important;
    }
}

/* Tape Markers (Legacy) */
.tape-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 32px; height: 20px; background: #1a1a1a; border: 1px solid #666; color: #ccc; font-size: 10px; font-weight: 700; font-family: 'JetBrains Mono'; border-radius: 3px; display: flex; align-items: center; justify-content: center; z-index: 5; transition: left 0.22s linear; box-shadow: 0 2px 5px rgba(0,0,0,0.5); }
.tape-marker.highlight { transform: translate(-50%, -50%) scale(1.4) !important; background: #fff !important; color: #000 !important; z-index: 2000 !important; }
.tape-marker.p1 { background: #fff !important; border: 1px solid var(--accent-gold) !important; color: #000 !important; z-index: 150 !important; box-shadow: 0 0 10px var(--accent-gold) !important; }
.tape-marker.p1:hover, .tape-marker.p1.highlight { background: var(--accent-gold) !important; color: #000 !important; border-color: #fff !important; z-index: 200 !important; transform: translate(-50%, -50%) scale(1.4) !important; }
.tape-marker.p1.in-pit { display: none !important; }
.tape-marker.yellow-flag { background: #1a1a1a !important; border: 1px solid var(--accent-gold) !important; color: var(--accent-gold) !important; width: 32px !important; height: 20px !important; z-index: 4 !important; display: flex; flex-direction: column-reverse; }
.tape-marker.yellow-flag.yf-massive { z-index: 200 !important; }
.tape-marker.yellow-flag::before { content: '⚠️'; position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 14px; z-index: 202; line-height: 1; }
/* [V67.15] Replaced by shared definition above */
/* .tape-marker.yellow-flag::after ... */
/* .tape-marker.yellow-flag.yf-massive::after ... */

/* Fixes */
.dot.in-pit:hover, .dot.in-pit.highlight { z-index: 99999 !important; }
.dot.in-pit:hover .dot-label, .dot.in-pit.highlight .dot-label { display: block !important; visibility: visible !important; opacity: 1 !important; background: rgba(0, 0, 0, 0.95); border-color: rgba(255, 255, 255, 0.8); z-index: 100000 !important; }
.dot.yellow-flag:hover, .dot.yellow-flag.highlight { 
    /* 仅修改缩放变量，不覆盖 transform */
    --dot-scale: calc(1.4 / var(--map-scale, 1));
    z-index: 99999 !important; box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.6) !important; background-color: rgba(0, 0, 0, 0.3) !important; border-radius: 50%; cursor: pointer; 
}
.dot.yellow-flag:hover .dot-label, .dot.yellow-flag.highlight .dot-label { display: block !important; opacity: 1 !important; visibility: visible !important; z-index: 100000 !important; border-color: var(--accent-gold) !important; box-shadow: 0 0 10px rgba(255, 215, 0, 0.3) !important; }

/* Animations */
/* @keyframes pulse-gold REMOVED */

/* [Performance] Legacy animations removed to prevent conflict and performance issues */
/* @keyframes pulse-battle ... */
/* @keyframes flash-overtake ... */
/* @keyframes ripple-battle-layer ... */
/* @keyframes ripple-overtake-layer ... */
@keyframes ripple-wave-normal { 0% { width: 14px; height: 14px; opacity: 0.8; border-width: 4px; } 100% { width: 40px; height: 40px; opacity: 0; border-width: 0px; } }
@keyframes ripple-wave-massive { 0% { width: 14px; height: 14px; opacity: 0.9; border-width: 6px; } 100% { width: 80px; height: 80px; opacity: 0; border-width: 0px; } }
/* @keyframes map-pulse-green REMOVED */
/* @keyframes map-pulse-purple REMOVED */

/* [V68.11] Car Icon Style (Adaptive Mode) */
/* [V69.0] Default Small Size (Global) */
.dot.has-icon {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    
    /* [V69.1] Icon Base Size Increased by 50% */
    width: 48px !important;
    height: 48px !important;
    
    /* [V69.1] Icon Scaling: Partial Map Scale Follow */
    /* Formula: 1 + (scale - 1) * 0.6 */
    /* At 1x map -> 1x icon (48px) */
    /* At 4x map -> 2.8x icon (134px) - instead of 4x (192px) */
    /* This prevents icons from becoming overwhelmingly large at max zoom */
    --dot-scale: calc(1 / var(--map-scale, 1) * clamp(1, 1 + (var(--map-scale, 1) - 1) * 0.6, 2.8)) !important;
    
    /* Ensure icon is centered on coordinate */
    z-index: 200 !important; /* Above normal dots (100) but below tracking (1000) */
    
    /* [V69.1] Visual Cleanup */
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* [V69.0] Large Size (Tracking Mode Only) */
.dot.has-icon.tracking-icon {
    /* [User Request] Desktop: 96px */
    width: 96px !important;
    height: 96px !important;
    z-index: 1000 !important;
    
    /* Tracking mode stays constant size (counter-scaled) */
    --dot-scale: var(--dot-base-scale) !important;
}

.dot.has-icon .car-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    
    /* [V68.14] Remove CSS transform to avoid conflict with JS inline style */
    /* transform: rotate(var(--rot, 0deg)); */
    
    /* Smooth rotation */
    /* [V68.12] Fix: Sync rotation transition with dot movement */
    /* Use linear for rotation to match movement, prevents jitter */
    /* [Optimization] Remove CSS transition as we use JS Lerp for rotation now */
    transition: none; 
    
    /* Filter to make it visible on dark map */
    filter: drop-shadow(0 0 4px rgba(0,0,0,0.8));
    
    /* [Fix] Ensure transform is applied */
    display: block;
    
    /* [V69.3] High Quality Rendering for PNGs */
    /* Force browser to use sharper interpolation for downscaled high-res images */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    /* fallback */
    image-rendering: pixelated; 
    
    /* Ensure the image layer is composited separately to avoid rasterization at small scale */
    will-change: transform;
}

/* [V69.1] Icon Specific State Styles */
    /* Use Drop Shadow for icons instead of box-shadow/border */
    
    /* [V69.2] Car Icon Hover Effects (Override Standard Dot) */
    .dot.has-icon:hover, .dot.has-icon.highlight {
        /* Remove the circular border/box-shadow */
        box-shadow: none !important;
        border: none !important;
        /* Let scale effect persist via --dot-scale variable update */
    }
    
    .dot.has-icon:hover .car-icon-img, 
    .dot.has-icon.highlight .car-icon-img {
        /* Brighten and add Cyan glow (Standard Hover) */
        filter: drop-shadow(0 0 8px var(--accent-cyan)) brightness(1.3) !important;
        /* Ensure transition matches dot */
        transition: filter 0.2s ease-out;
    }
    
    /* P1: Gold Glow */
    .dot.has-icon.p1 .car-icon-img {
        filter: drop-shadow(0 0 5px var(--accent-gold)) drop-shadow(0 0 10px rgba(255, 215, 0, 0.5)) !important;
    }
    
    /* P1 Hover: Stronger Gold Glow */
    .dot.has-icon.p1:hover .car-icon-img, 
    .dot.has-icon.p1.highlight .car-icon-img {
        filter: drop-shadow(0 0 10px var(--accent-gold)) drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)) brightness(1.2) !important;
    }
    
    /* Battle: Red Glow */
    .dot.has-icon.battle .car-icon-img {
        filter: drop-shadow(0 0 5px #ff1100) drop-shadow(0 0 10px rgba(255, 17, 0, 0.5)) !important;
    }
    
    /* Battle Hover: Stronger Red Glow */
    .dot.has-icon.battle:hover .car-icon-img, 
    .dot.has-icon.battle.highlight .car-icon-img {
        filter: drop-shadow(0 0 10px #ff1100) drop-shadow(0 0 20px rgba(255, 17, 0, 0.8)) brightness(1.2) !important;
    }
    
    /* Overtake: Green Glow */
    .dot.has-icon.overtake .car-icon-img {
        filter: drop-shadow(0 0 5px var(--accent-green)) drop-shadow(0 0 10px rgba(0, 255, 157, 0.5)) !important;
    }
    
    /* Overtake Hover: Stronger Green Glow */
    .dot.has-icon.overtake:hover .car-icon-img, 
    .dot.has-icon.overtake.highlight .car-icon-img {
        filter: drop-shadow(0 0 10px var(--accent-green)) drop-shadow(0 0 20px rgba(0, 255, 157, 0.8)) brightness(1.2) !important;
    }
    
    /* Hide legacy ripple effects for icons to prevent ugly square borders */
    /* This includes battle, overtake, AND yellow-flag ripples */
    .dot.has-icon::after,
    .dot.has-icon.yellow-flag::after,
    .dot.has-icon.yellow-flag::before {
        display: none !important;
        content: none !important;
        animation: none !important;
    }
    
    /* Ensure yellow flag state for icons is handled via drop-shadow on image */
    .dot.has-icon.yellow-flag .car-icon-img {
        /* Yellow/Gold Glow */
        filter: drop-shadow(0 0 5px var(--accent-gold)) drop-shadow(0 0 10px rgba(255, 215, 0, 0.5)) !important;
    }

/* Hide label when tracking (optional, to reduce clutter) */
.dot.has-icon .dot-label {
    /* [V68.23] User Request: Show label on PC tracking */
    display: block;
    top: -25px; /* Adjust for small icon */
}

.dot.has-icon.tracking-icon .dot-label {
    top: -40px; /* Adjust for large icon */
}

/* Mobile */
@media screen and (max-width: 999px) {
    .map-panel {
        order: 1; width: 100%;
        border-bottom: 1px solid var(--glass-border);
        padding-top: 40px !important; 
    }
    #map-viewport { position: relative; } /* Mobile Fallback */
    #map-wrapper { max-height: 40vh; }

    /* [User Request] Mobile Default: 24px */
    .dot.has-icon {
        width: 24px !important;
        height: 24px !important;
    }
    
    /* [User Request] Mobile Tracking: 48px */
    .dot.has-icon.tracking-icon {
        width: 48px !important;
        height: 48px !important;
    }
    
    /* [User Request] Mobile Tracking: Force Hide Label */
    /* Only specific for has-icon to allow peek */
    .dot.has-icon .dot-label {
        display: none !important;
    }
    
    /* [V68.24] Mobile Tracking: Hide ALL labels, not just the tracked car */
    /* When in tracking mode (map-wrapper.tracking-active), hide all labels to prevent clutter */
    /* Note: We need to add 'tracking-active' class to wrapper in JS */
    /* [Fix V68.25] Increase specificity to override other states */
    #map-wrapper.tracking-active .dot .dot-label {
        display: none !important;
        visibility: hidden !important; /* Double ensure */
        opacity: 0 !important;
    }
    
    /* Allow peek on hover/active (touch) for mobile */
    /* This overrides the above rule for the INTERACTED element only */
    #map-wrapper.tracking-active .dot:hover .dot-label,
    #map-wrapper.tracking-active .dot:active .dot-label {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        top: -30px;
        z-index: 999999 !important; /* Ensure on top */
    }

    /* [Optimization] Fix flickering on mobile by removing expensive filter */
    .dot.has-icon .car-icon-img {
        filter: none !important;
    }
    
    /* [User Fix] Mobile Flicker & Smoothness: DISABLE transform transition */
    /* Transition causes conflict with JS Lerp loop, resulting in flicker */
    /* We must rely on JS Lerp solely for smoothness */
    .dot {
        transition: background-color 0.5s ease-out, border-color 0.5s ease-out !important;
        will-change: auto !important; 
    }

    /* [User Request] Mobile: Remove Ripple Effects (Performance) */
    /* Only hide ::after (Ripples), keep ::before (Icons/Exclamation) and base styles (Colors) */
    .dot.battle::after, 
    .dot.overtake::after,
    .dot.yellow-flag::after,
    .tape-marker.yellow-flag::after {
        display: none !important;
        animation: none !important;
    }
}

/* [V67.2] Yellow Flag Zone Animation */
#yf_zone {
    /* [V67.19] Fix: Force disable transition with !important to ensure no "flying in" animation occurs */
    transition: none !important; 
    stroke-opacity: 0.8;
    transform-origin: center;
    
    /* [V67.16] Performance: Optimization for High Zoom */
    will-change: auto;
    
    /* [V67.17] Quality: Restore geometric precision */
    shape-rendering: geometricPrecision !important;
    stroke-linecap: round !important;
}

#yf_zone.active {
    /* [V67.9] Performance: Animation disabled completely per user request */
    /* High contrast static style */
    stroke: #ffd700; /* Gold */
    stroke-width: 55px; /* Fixed width */
    stroke-opacity: 0.9;
    
    /* Remove expensive properties */
    animation: none;
    will-change: auto;
}

/* Animation definition kept for reference but unused */
@keyframes yf-zone-pulse {
    0% { stroke-opacity: 0.4; stroke: #ff4500; }
    100% { stroke-opacity: 1; stroke: #ffd700; }
}

/* [V67.7] Green Flag Effects Removed (Rolled Back) */