/* ==========================================================================
   FUTURISTIC SPEEDOMETER HUD - IN-GAME TRANSPARENT HUD
   Optimized for GTA V / JGVRP / FiveM / SA-MP / CEF Webview
   ========================================================================== */

:root {
    /* Palette sampled directly from reference */
    --color-text-main: #3b394f;
    --color-text-subtle: #7d758d;
    --color-text-dim: #9da4b6;
    --color-teal: #50c8c8;
    --color-teal-dim: #4fb2b2;
    --color-pink-magenta: #e026b4;
    --color-pink-light: #f7c2dc;
    --color-purple-blue: #6977ef;
    --color-lavender: #cfc8ea;
    --color-guide-line: #cfcbd6;
    --color-warning-red: #a83535;

    /* Typography */
    --font-numeric: 'Rajdhani', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-ui: 'Rajdhani', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Reset & 100% Transparent In-Game Environment */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent !important;
    background-color: transparent !important;
    user-select: none;
    pointer-events: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* In-Game HUD Stage (Positioned in Bottom-Right Corner) */
.hud-stage {
    position: fixed;
    right: 32px;
    bottom: 24px;
    width: clamp(380px, 28vw, 540px);
    aspect-ratio: 444 / 250;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    pointer-events: none;
    z-index: 9999;
}

/* Scalable Master SVG with Ambient Drop Shadow for Contrast against Game World */
#hud-svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.45));
}

/* ==========================================================================
   SVG HUD GRAPHICS STYLING
   ========================================================================== */

/* Typography */
.txt-subtle {
    font-family: var(--font-ui);
    font-weight: 500;
}

/* RPM Arc Segments */
.rpm-seg {
    transition: opacity 0.12s ease, fill 0.15s ease;
}

.rpm-seg.inactive {
    opacity: 0.14 !important;
    filter: none !important;
}

.rpm-seg.active {
    opacity: 1 !important;
}

/* Dynamic Speed Numbers */
#speed-value, #speed-stroke, #speed-glow, #speed-core {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
}

/* Supporting Technical Icons */
.hud-icon {
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.hud-icon:not(.active):not(.warning) {
    opacity: 0.45;
}

.hud-icon.active {
    opacity: 1;
}

.hud-icon.warning {
    opacity: 1;
    filter: drop-shadow(0 0 3px rgba(168, 53, 53, 0.6));
}

/* Battery Indicator Level Bars */
#battery-icon-visual rect {
    transition: opacity 0.2s ease;
}