body {
    background: #fff;
    margin: 0;
    padding: 0;
}

.containerS {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
}

.row {
    display: flex;
    justify-content: center;
    position: relative;
    padding: 12px 0;
}

.bars-and-ball {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 44px;
    width: 100%;
}

.fill-left, .fill-right {
    position: absolute;
    top: 50%;
    height: 24px;
    border-radius: 999px;
    transform: translateY(-50%);
}

.fill-left {
    background: #4978e5;
    right: 50%;
    width: 0px;
    transform-origin: right center;
    transition: width 0.8s ease-out;
}

.fill-right {
    background: #81b2e2;
    left: 50%;
    width: 0px;
    transform-origin: left center;
    transition: width 0.8s ease-out;
}

.ball {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f7f7f7;
    border: 2px solid #d1d5db;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    z-index: 2;
    box-shadow: 0 6px 14px rgba(15,23,42,0.12);
    user-select: none;
    font-weight: 600;
}

.badge-left {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #f7f7f7; 
    color: #111827;
    font-size: 0.75rem;
    padding: 2px 6px;
    white-space: nowrap;
    border-radius: 12px;
    opacity: 0;
}

.badge-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #f7f7f7;
    color: #111827;
    font-size: 0.75rem;
    padding: 2px 6px;
    white-space: nowrap;
    border-radius: 12px;
    opacity: 0;
}

.row-header {
    text-align: center;
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: #374151;
}
.bonus-row {
    display: flex;
    justify-content: center;
    position: relative;
    padding: 12px 0;
}

.bonus-bars-and-ball {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 44px;
    width: 100%;
}

.bonus-fill-left, .bonus-fill-right {
    position: absolute;
    top: 50%;
    height: 24px;
    border-radius: 999px;
    transform: translateY(-50%);
}

.bonus-fill-left {
    background: #4978e5;
    right: 50%;
    width: 0px;
    transform-origin: right center;
    transition: width 0.8s ease-out;
}

.bonus-fill-right {
    background: #81b2e2;
    left: 50%;
    width: 0px;
    transform-origin: left center;
    transition: width 0.8s ease-out;
}

.bonus-ball {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e02727;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    z-index: 2;
    box-shadow: 0 6px 14px rgba(15,23,42,0.12);
    user-select: none;
    font-weight: 600;
}

.bonus-badge-left, .bonus-badge-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #f7f7f7;
    color: #111827;
    font-size: 0.75rem;
    padding: 2px 6px;
    white-space: nowrap;
    border-radius: 12px;
    opacity: 0;
}

.bonus-row-header {
    text-align: center;
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: #374151;
}