body, html {
    height: 100%;
    margin: 0;  
}



.delta-bar-track {
    position: relative;
    height: 50px;
    /*background: linear-gradient(to right, #c00000 0%, #ffff00 50%, #018f01 100%);*/
    border-radius: 8px;
    overflow: hidden;
}



.delta-progress-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0%;
    background: white;
    z-index: 5;
    transition: width 0.3s ease-out, left 0.3s ease-out, right 0.3s ease-out, background-color 0.3s ease;
}

.delta-progress-bar.winning {
    background: rgba(34, 197, 94, 0.6);
    border-right: 3px solid #22c55e;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}

.delta-progress-bar.losing {
    background: rgba(239, 68, 68, 0.6);
    border-left: 3px solid #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.delta-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);    
    padding: 4px 12px;
    border-radius: 4px;
    z-index: 20;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    pointer-events: none;
    width: 100px;
    text-align: center;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.blink-message {
    animation: blink 1s infinite;
}

.font-mono-bold {
    font-weight: 900;
    -webkit-text-stroke: 0.8px currentColor;
    letter-spacing: 0.02em;
}