body {
    margin: 0;
    background: transparent;
    font-family: 'Teko', sans-serif;
    color: white;
}

.warning-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    justify-content: flex-start; /* Keeps total near boxes */
}

.label {
    font-size: 32px;
    font-weight: bold;
    padding: 5px 15px;
    border-radius: 6px;
    letter-spacing: 1px;
    color: #fff;

    /* Solid Red Background */
    background: #cc0000;

    /* Text Shadow for Depth */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.9), 0 2px 4px rgba(0, 0, 0, 0.8);

    /* Outer Glow Pulse */
    box-shadow: 0 0 10px rgba(255,255,255,0.8);
    animation: whitePulse 1.5s infinite ease-in-out;
}

@keyframes whitePulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255,255,255,0.8);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 25px rgba(255,255,255,1);
        transform: scale(1.05);
    }
}


.warnings-container {
    display: flex;
    gap: 8px;
}

.box {
    padding: 5px 10px;
    text-align: center;
    border-radius: 6px;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: bold;

    /* 3D shadow */
    box-shadow:
        0 4px 8px rgba(0,0,0,0.5), /* drop shadow */
        inset 0 -2px 4px rgba(0,0,0,0.4), /* inner shadow bottom */
        inset 0 2px 4px rgba(255,255,255,0.15); /* inner highlight top */

    background-image: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(0,0,0,0.15));
}

.count {
    font-size: 24px;
    color: #fff;
    font-weight: bold;
    text-shadow:
        0 2px 4px rgba(0,0,0,0.9),
        0 0 3px rgba(255,255,255,0.3);
    
    animation: yellowPulse 3.5s infinite ease-in-out;
}


@keyframes yellowPulse {
    0%, 100% {
        transform: scale(1);
        color: #fff;
        text-shadow:
            0 2px 4px rgba(0,0,0,0.9),
            0 0 3px rgba(255,255,255,0.3);
    }
    40% {
        transform: scale(1.25);
        color: #ffcc00; /* Bold yellow */
        text-shadow:
            0 2px 4px rgba(0,0,0,0.9),
            0 0 15px rgba(255,255,0,1);
    }
    60% {
        transform: scale(1.15);
        color: #ffe066; /* Softer yellow fade back */
        text-shadow:
            0 2px 4px rgba(0,0,0,0.9),
            0 0 8px rgba(255,255,0,0.7);
    }
}



.count.update {
    animation: flashUpdate 0.6s ease-in-out;
}

@keyframes flashUpdate {
    0% { transform: scale(1.2); text-shadow: 0 0 10px #fff; }
    50% { transform: scale(0.95); text-shadow: 0 0 5px #ff0; }
    100% { transform: scale(1); text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
}

.label-small {
    font-size: 12px;
    color: #fff;
    text-shadow:
        0 2px 4px rgba(0,0,0,0.85),   /* Darker bottom shadow */
        0 0 2px rgba(255,255,255,0.2); /* Subtle soft glow for readability */
}

/* Tornado Emergency Animation */
.tornado_emergency {
    background: #8B0000; /* Dark Red */
    animation: tornadoPulse 1s infinite alternate;
    box-shadow: 0 0 15px #ff0000;
}

@keyframes tornadoPulse {
    from { box-shadow: 0 0 15px #ff0000; }
    to { box-shadow: 0 0 35px #ff0000; }
}

/* Flash Flood Emergency Animation */
.flashflood_emergency {
    background: #003300; /* Dark Green */
    animation: flashFloodPulse 1.2s infinite alternate;
    box-shadow: 0 0 15px #00ff66;
}

@keyframes flashFloodPulse {
    from { box-shadow: 0 0 15px #00ff66; }
    to { box-shadow: 0 0 35px #00ff66; }
}


.total-box {
    background: #115511;
    font-size: 28px;
    padding: 10px 20px;
    border-radius: 6px;
    text-align: center;
    color: #fff;

    box-shadow:
        0 4px 8px rgba(0,0,0,0.5),
        inset 0 -2px 4px rgba(0,0,0,0.4),
        inset 0 2px 4px rgba(255,255,255,0.15);

    background-image: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(0,0,0,0.15));
}

.sub {
    font-size: 12px;
    display: block;
}

/* Color Codes */
.tornado { background: #cc0000; }       /* Red - Tornado */
.tornado_emergency { background: #8B0000; } /* Darker red */
.svr { background: #dbd003; }            /* Orange - Severe T-Storm */
.flashflood { background: #01db16; }     /* Teal/Green - Flash Flood */
.flashflood_emergency { background: #003300; } /* Dark green */
.flood { background: #016211; }          /* Blue - Flood */
.winter { background: #77b4f2; }         /* Light Blue - Winter */
.fire { background: #6e0000; }           /* Bright Orange - Fire */
.wind { background: #5a5a5a; }           /* Amber - High Wind */
.dust { background: #fabc7e; }           /* Tan - Dust Storm */
.fog { background: #434343; }            /* Gray - Fog */
.heat { background: #ff4d4d; }           /* Yellow - Heat */
.special { background: #747475; }        /* Purple - Other */