/* =========================================================
   Zero Two Cluster Dashboard - JG-VRP Speedometer Pro
   Styling & In-Game Transparent HUD Layout
   Production Ready for FiveM NUI & Cloudflare Pages
   ========================================================= */

:root {
    /* HUD size and positioning for in-game Corner mode */
    --hud-width: 660px;
    --hud-bottom: 24px;
    --hud-right: 28px;
}

@media (min-width: 2560px) {
    :root {
        --hud-width: 860px;
        --hud-bottom: 36px;
        --hud-right: 40px;
    }
}

@media (max-width: 1440px) {
    :root {
        --hud-width: 580px;
        --hud-bottom: 20px;
        --hud-right: 20px;
    }
}

@media (max-width: 1024px) {
    :root {
        --hud-width: 480px;
        --hud-bottom: 16px;
        --hud-right: 16px;
    }
}

* {
    user-select: none;
    -webkit-user-drag: none;
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent !important;
    background-color: transparent !important;
    font-family: 'Rajdhani', 'Segoe UI', sans-serif;
    color: #9db7ee;
    -webkit-font-smoothing: antialiased;
}

/* Screen reader / FiveM compatibility hidden node */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Main speedometer container (Bottom-Right HUD Corner) */
main.speedometer {
    position: fixed;
    bottom: var(--hud-bottom);
    right: var(--hud-right);
    width: var(--hud-width);
    max-width: 95vw;
    aspect-ratio: 1672 / 760;
    pointer-events: none;
    z-index: 10;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 0.35s ease;
}

svg#hud {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 12px 36px rgba(0, 0, 0, 0.85));
}

text {
    font-family: 'Rajdhani', 'Segoe UI', sans-serif;
}

.o {
    font-family: 'Orbitron', 'Segoe UI', sans-serif;
}

#spd {
    font-family: 'Orbitron', 'Segoe UI', sans-serif;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    text-rendering: geometricPrecision;
}

/* =========================================================
   Animations & Indicator Blinks
   ========================================================= */

@keyframes hudBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.15; }
}

.hud-blink {
    animation: hudBlink 0.7s ease-in-out infinite;
}

@keyframes redlineGlow {
    0%, 100% { filter: drop-shadow(0 0 8px #ff0044); }
    50% { filter: drop-shadow(0 0 16px #ff0044) drop-shadow(0 0 24px #ff2d55); }
}

.redline-active {
    animation: redlineGlow 0.35s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}