/* Cyberpunk Grid Background & Strict Mobile Non-Horizontal Scroll */
html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-width: 100vw !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh;
    -webkit-overflow-scrolling: touch;
}

.bg-grid-pattern {
    background-image: 
        linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Speedometer Gauge Arc & Needle styling */
.gauge-arc-bg {
    stroke: rgba(255, 255, 255, 0.06);
    stroke-linecap: round;
}

.gauge-arc-fill {
    stroke-linecap: round;
    transition: stroke-dashoffset 0.15s ease-out, stroke 0.3s ease;
}

.gauge-needle {
    transform-origin: 150px 150px;
    transition: transform 0.12s cubic-bezier(0.1, 0.9, 0.2, 1);
}

/* Clickable Speedometer Gauge Button Styling */
.gauge-button-wrapper {
    touch-action: manipulation;
}

.gauge-button-wrapper:hover .gauge-arc-fill {
    filter: drop-shadow(0 0 12px rgba(14, 165, 233, 0.8));
}

/* Pulse glow for main start button */
.pulse-glow {
    animation: pulseGlow 2s infinite alternate;
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 15px rgba(14,165,233,0.15); }
    100% { box-shadow: 0 0 35px rgba(14,165,233,0.35); }
}

/* Dynamic metric badge glows */
.metric-card {
    transition: all 0.3s ease;
}

.metric-card:hover {
    border-color: rgba(14, 165, 233, 0.4);
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.08);
}

/* Graph container canvas responsive styling */
#sparklineCanvas {
    width: 100%;
    height: 50px;
    display: block;
}

/* Results section smooth transition */
#resultsContainer {
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}